We will create a form that will have error messages styled using CSS, and custom validation using HTML and JavaScript as follows:

The required attribute marks the HTML element inside the form, required to have a value before the form can be submitted. The first field that will not have a value would get focused upon submission and a hint with a message would be shown to the user:

There are several ways to customize the message displayed to the user on Firefox; we can use the x-moz-errormessage attribute. In our case, this is x-moz-errormessage="We need this.", but this will only work there. On Chrome, the title attribute gets additionally displayed beside the standard message, but the original message stays. Another way for changing the message would be to set the value using JavaScript:

 <input type="text" required="required" oninvalid="this.setCustomValidity('Please put some data here')">

As for styling the form elements, there are the CSS pseudo class selectors :required and :optional.

The min, max, and step attributes can be used on date-related input types and not just on numbers. The default step is one day for date type, one week for week types, and so on. If we set a different step than the default one, for example on the month input if we have the step with value two, the user will not be able to select every other month from the DatePicker control, but he or she can still enter the wrong date in text, triggering stepMismatch.

Because validation is triggered before the form is submitted, and if the input is invalid, the submit event is never called. If we need to have a way of submitting data without validation, we can do that by using the formnovalidate attribute as follows:

<button type="submit" formnovalidate>Save but don't validate</button>

We may sometimes need to access the validityState value of an element from JavaScript; for that purpose there is a checkValidity() method executed on the form and the input elements in the form. As the name suggests, it checks the state of elements, and when it is called on the form, all the child elements are checked for validation and additionally, we can call the method on each individual element, for example input, select, or textarea. In our case for the form, it was as follows:

$('form')[0].checkValidity();

The $('form')[0] element gives us the wrapped DOM element of the selected jQuery's object, this can also be done by calling .get() on the selected element. Each element has a validitystate value that we can read as follows:

       $("input").each(function(index) {
          var validityState = $(this)[0].validity;
       …

There are several built-in checks we can access at this point that are properties of the validityState object: valueMissing, typeMismatch, patternMismatch, tooLong, rangeUnderflow, rangeOverflow, stepMismatch, badInput, and customError. Each of these will return true if there is such constraint violation. In the example code for this recipe, we just print out the name of the constraint violation to the log.

What happens if we have fields that depend on each other or when we need to implement some custom validation logic? No problem there we are covered, we can use the setCustomValidity() method on each of the fields that depend. In our case, we wanted the input for the name and nickname variables to be different. So we added change listener and if they are the same we just set the message with customValidity("your message here") and when we need to remove the violation, we set the message to be an empty string:

    $("input[name='nickname']").change(function(){
      if($(this).val() === $("input[name='name']").val()){
      $(this)[0].setCustomValidity("You must have an awesome nickname so nickname and name should not be the same");
      }else{
      $(this)[0].setCustomValidity("");
      }
    });

Additionally, there are two more CSS pseudo selectors for :valid and :invalid that we will be used to style elements, depending on their validityState value.

If we want to use some of the attributes to disable the entire form from validating, we can set the form attribute called novalidate. For example, this will disable the checks, but allow use of min and max for input type range.

There is an another way to disable the standard browser hint box and create a custom one:

    $('form').each(function(){
      $(this)[0].addEventListener('invalid', function(e) {
        e.preventDefault();
        console.log("custom popup");
      },true);
    });

Several questions should be thought through before using built-in constraints:

If we need to know when the user has tried to submit the form, we can attach event listener for click rather than submit. As for legacy browsers, we may choose to rely on server-side validation that must be present, but if we don't want to lose functionality at the client side, there are some ways of doing this by adding webshim, http://afarkas.github.com/webshim/demos/index.html.