SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    Custom Styling HTML5 Validation Messages

    Hi there guys,

    I am working on a template website and I wanted to be able to add custom custom styling on the HTML5 validation forms. The HTML code is below:

    Code:
    <form id="contact-form">
    	<label for="name" class="inline-label">Name</label>
    	<input type="name" class="input single-row" placeholder="required" required/>
    	<br class="clear" />
    	<label for="email" class="inline-label">Email</label>						
    	<input type="email" class="input single-row" placeholder="required" required/>					
    	<br class="clear" />
    	<label for="website" class="inline-label">Website</label>						
    	<input type="website" class="input single-row" placeholder="required" required/>							
    	<br class="clear" />
    	<label for="comments" class="inline-label">Comments</label>						
    	<textarea name="text" class="input textarea" placeholder="put your comment here" required></textarea>						
    	<br />
    	<button type="submit" class="button first-button">Submit</button>
    	<button type="reset" class="button">Reset</button>
    </form>
    Because the form is required, as now stated with HTML5, a rather ugly pop-up appears. I want to be able to style this ugliness to something less ugly lol. I found this website, http://stackoverflow.com/questions/5...ation-messages. But I am not sure if am able to enhance the appearance on all the browsers.

    I am thinking of completely removing the required field, or using jQuery instead.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Personally i feel that HTML5 validation has an EXTREMELY long way to go before it is 100% as currently i still see it as been something that's experimental, i would recommend you use the jQuery validation plugin which i have used in the past and loved because of it's extended base allowing for much more than whats offered straight up.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    And i would recommend PHP validation, as you can't rely on JS either. HTML and JS can offer nice enhancements, but they can't replace server-side checks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •