How To Create Html5 Custom Validation?

I am using html 5 form validation for validate my form before submit, if is valid, submit, but I need validate my User Register form, so it need validate if Password Confirm value

Solution 1:

Well you can use JQuery and attach an attribute to be selected for the passwords to validate each other via input event. Use setCustomValidity() to set the message of the input affected to override the default message when the form is submitted.

See the updated fiddle.

As you can see in the fiddle, all you have to do is add an attribute data-equal-id wherein the attribute value must be the ID of password input element to be tested.

HTML

<h1>How to create html5 validation for password confirm?</h1><hr><form><label>Login:</label><inputtype="text"name="login"id="login"/><br/><label>Password:</label><inputtype="password"name="pass"id="pass"/><br/><label>Password Confirm:</label><inputtype="password"name="pass_conf"id="pass_conf"data-equal-id="pass" /><br/><inputtype="submit"/></form>

Javascript

$('[data-equal-id]').bind('input', function() {
    var to_confirm = $(this);
    var to_equal = $('#' + to_confirm.data('equalId'));

    if(to_confirm.val() != to_equal.val())
        this.setCustomValidity('Password must be equal');
    elsethis.setCustomValidity('');
});

Solution 2:

you could try putting this code in your header:

<script>document.getElementById('myform').onsubmit = function() {

    if(!validateForm()){ // call your validation functionalert('fail!'); // remove thisreturnfalse; // prevent the form to submit
    }
}

// your validation function// compares that the passwords are equalfunctionvalidateForm(){
    var pass = document.getElementById('pass').value;
    var pass_conf = document.getElementById('pass_conf').value;

    if(pass == pass_conf){
        returntrue;
    }else{
        returnfalse;
    }

}
</script>

also put the id 'myform' to your form (or the name you want, but change it in the first line)

Solution 3:

How about something fun like this using jQuery?

$('input[type="password"]').keyup(function() {
  var pass=$('#pass').val();
  var conf=$('#pass_conf').val();
  if (pass == conf)
    $('input[type="submit"]').removeAttr('disabled');
  else
    $('input[type="submit"]').attr('disabled', 'disabled');
});

The breakdown...

• I am keying off of the keyup, so every time a key is pressed in the password fields the function will fire.
• I'm grabbing the value of both password fields, and comparing them.
• If the values are the same, I'm enabling the submit button.
• If the values are different, I'm disabling the submit button.

Pretty simple, but it works. Here is a demo: http://codepen.io/anon/pen/GxAyC/

(note - I added a couple of other visual enhancements to the demo to show what can be done)