HTML5 setCustomValidation unbind issues

Question

I am using the inbuilt HTML5 validation methods to validate the date of birth in a form.

The form has three select list elements, user_dob_date user_dob_month user_dob_year

All these three elements has been put as "required" for validation as the user has to select a valid option

Now, after the user selects all the three options and HTML5 validation for selecting atleast an option goes through fine, I want to check the date for leap year and also making sure user does not select something like 31st feb 1998!!!

$('#form-signup-next').submit(function(){                       
   if($('#user_dob_month').val()=='2' && $('#user_dob_date').val()>29 ){
        var obj=$('#user_dob_date')[0];
        alert($('#user_dob_month').val());
        obj.setCustomValidity('Invalid Date!');         
   }else{
        var obj=$('#user_dob_date')[0];
        obj.setCustomValidity('');
    }
    return false;
    });

-> The custom msg does not display when the submit is clicked. It does if the button is clicked twice. First click it matbe sets the msg but doesn display, second click the error is displayed

-> If after wrong selection and display of custom msg, if the date is fixed and we try to submit the form, it still throws the error :(

Please help me out in this. Thanks in advance :)

Answer 1

You should not do that on submit of the form because once the setCustomValidity value is set it will not allow to submit the form until unless that validation error value got clear and in your code the issue is that you are clearing the error value on submit. So that's the reason that you are getting the validation error even if you corrected the value on next run.

For details please check this link CURRENT IMPLEMENTATION ISSUES AND LIMITATIONS(specially Problem 3)

ok so now you can do this in this way..by checking & setting the error message on drop down value change event

$('#user_dob_date,#user_dob_month').on('change',function(){
    if($('#user_dob_month').val()=='2' && $('#user_dob_date').val()>29){
    $('#user_dob_date')[0].setCustomValidity('Invalid Date!');
    }
    else{
    $('#user_dob_date')[0].setCustomValidity('');
    }
  });

i checked this & it is working fine.

So now when a user select the wrong combination & press submit button it will show the error message.

Try this at http://jsbin.com/aqicim/1