CODEWITHSUNDEEP
javascripthtmlformsvalidationcustomization
Lai32290
Lai32290

Reputation: 8578

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 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?

Upvotes: 10

Views: 22971

Answers (4)

vhs
vhs

Reputation: 10089

You're using HTML5 for client-side form validation and wish to validate your form prior to form submission. Your form consists of three inputs and your only validation criteria is that both password fields match.

The most simple way to do this is to write a custom submit handler script:

const handleFormSubmit = (event) => {
  event.preventDefault();
  form = event.target;
  if (form.pass === form.pass_conf) {
     form.submit();
  }
}

Above preventDefault() stops the default form submission behavior so you can execute your check. Then check if the value of the two password fields are equal. And if they are, continue form submission.

To use, attach the custom handler to your form by listening to the submit event:

const form = document.querySelector('form');
form.addEventListener('submit', handleFormSubmit);

Applied in context to example form provided:

<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>

<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', handleFormSubmit);

  const handleFormSubmit = (event) => {
    event.preventDefault();
    form = event.target;
    if (form.pass.value === form.pass_conf.value) {
       form.submit();
    }
  }
</script>

Upvotes: 1

Charlie74
Charlie74

Reputation: 2903

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)

Upvotes: 1

ryeballar
ryeballar

Reputation: 30118

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('');
});

Upvotes: 14

eventHandler
eventHandler

Reputation: 1211

you could try putting this code in your header:

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

    if(!validateForm()){ // call your validation function
        alert('fail!'); // remove this
        return false; // prevent the form to submit
    }
}

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

    if(pass == pass_conf){
        return true;
    }else{
        return false;
    }

}
</script>

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

Upvotes: 3

Related Questions