Turn off default styling for required fields

In this quick tip. I’ll be showing you how you can turn off the default styling of required fields in html5.
This is to maintain uniformity of the design across different browsers.

As you might have noticed, the styling for the required fields are not the same across browsers:

Chrome

image


Opera

image

 

Firefox

image

 

Solution

The truth is there’s actually no way to style the required fields using css pseudo-selectors at the time of this writing. The required text field will automatically be styled when you do something like this:

input[type=text]:required{
     border-color:yellow;
}

And it isn’t what we want to do since we only want the border-color to become yellow once the event where the browser says the field is required is executed.

What we can do is to turn off validation in the form:

<form action="ps_styling.php" method="post" novalidate></form>

The attribute novalidate, tells the browser not to validate the input fields enclosed by the form. This means that the styling is also effectively turned off.

But hey, if you do this then you are also turning off the built-in validation feature in html5. That’s why we nee to do a few tricks if you still want to validate user input on the client-side(browser).

Here are some of the conditions:

  1. use button instead of submit
  2. turn on javascript on the browser
  3. use javascript to do the validation
  4. use ajax to submit the form to the server

 

Let me explain the first one. Using button instead of submit. Since we will be using ajax to submit the form to the server we don’t need to use a submit button. Because it will always submit the form to the server whether or not the javascript validation did its job.

Second, turn on javascript on the browser. All of this won’t work if the javascript is turned off. Malicious users can easily do this to avoid client-side validation. That’s why its also useful to have both client and server-side validation when writing an application.

Third, use javascript to do the validation. Its self-explanatory since were not already using the power of html5 by turning it off using the novalidate form attribute.

Fourth, use ajax to submit the form to the server. Since ajax is also javascript code, we can choose to execute or not execute it depending on the user input. If its valid or invalid.

Here’s the code which checks the value in required text fields. The user clicks on the button. Then we loop through all the text fields, check if it has the attribute required and if it is empty. If its empty then we add up another element to the array. Which will later on be check if it is empty. If its empty then we execute the ajax which talks to the database. If its not empty then we issue an alert to the user that he has to fill up the required fields.

$('#subs').click(function(){
    var invalid_count = new Array();
	$('input[type=text]').each(function(index){
		var req_field = $.trim($(this).val());
		if(this.required && req_field == ''){
			invalid_count[index] = req_field;
		}
	});
	
	if(invalid_count.length > 0){
		alert('Please fill out the required fields!');
	}else{
		//ajax here
	}
});

And here’s the html:

<form action="ps_styling.php" method="post" novalidate>
	<fieldset id="fs">
	<label for="x">*x:</label> 
	<input type="text" name="x" required>
	
	<label for="y">y:</label>
	<input type="text" name="y">
	
	<input type="button" id="subs" value="save">
	</fieldset>
</form>

 

Conclusion

That’s it for this tutorial. You have learned how to turn off the styling for required fields. The difference of styles throughout different browsers. And how to use javascript to validate user input.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s