Question

I have Some text boxes and one submit button. I have Used HTML5 ‘required’ validation. Its working fine. Now I want to call a function in button click when HTML5 validation does not find any Error. When The required field is not provided the button click will not call the function.

Answer 1

You’re going to need some extra help to do this, it could be in the form of plain javascript. Personally, I’d use jQuery to help out as it will make things easier for you and account for any cross-browser consistencies. Whether or not you want to use jQuery your is choice, whether it’s appropriate only for this is another conversation, the following example is just a demonstration.

Here’s a hypothetical example using jQuery that achieves your validation listening functionality:

HTML

<form>
    <input type="text" class="input-text" required>
    <input type="text" class="input-text" required>
    <input type="submit" id="submit" class="input-button" disabled>
</form>

​
JS

$textInputs = $('input.input-text');
$textInputs.on('keyup', function() {
    var $validTextInputs = $('input.input-text:valid'),
        $submit = $('#submit');
    console.log($textInputs.length, $validTextInputs.length);
    if($textInputs.length === $validTextInputs.length){
        //all text fields are valid
        $submit.attr('disabled', null);
    } else {
        //not all text fields are valid
        $submit.attr('disabled', '');
    }
});​

CSS (only let’s us know, visually, when the input is valid)

.input-text:valid {
    background: green;
}​

See the example in action here: http://jsfiddle.net/m6QXc/