Question

167

How to create html5 custom validation?

rated 0 times [ 171] [ 4] / answers: 1 / hits: 16105 / 10 Years ago, fri, march 28, 2014, 12:00:00

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 is equal camp Password, below is my form example:

<form>

    <label>Login:</label>

    <input type="text" name="login" id="login"/><br/>

    <label>Password:</label>

    <input type="password" name="pass" id="pass"/><br/>

    <label>Password Confirm:</label>

    <input type="password" name="pass_conf" id="pass_conf"/><br/>



    <input type="submit"/>

</form>

or in jsfiddle

How to can I create my custom validation for work like default validations?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eastonb

Add To Favorites

Follow

Total Points: 498

Total Questions: 91

Total Answers: 102

Location: Tanzania

Member since Wed, Feb 24, 2021

3 Years ago

answered 10 Years ago mustafaericho · Accepted Answer

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>

    <input type=text name=login id=login/><br/>

    <label>Password:</label>

    <input type=password name=pass id=pass/><br/>

    <label>Password Confirm:</label>

    <input type=password name=pass_conf id=pass_conf data-equal-id=pass /><br/>

    <input type=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');

    else

        this.setCustomValidity('');

});