表单验证HTML5

Question

I am using the 'required' attribute in my form child tags for validation. The problem that I have is that, when I first click submit, no validation takes place and an empty form also gets submitted.

From the second time on wards, each time I click submit the validation check kicks in and reports an empty field.

My code:

<form>
    <label for="id">ID:</label>
    <input type="text" class="form-control"  id="id" required>
    <label for="name">Name:</label>
    <input type="text" class="form-control" id="name" required />
    <button type="submit" class="btn btn-info pull-right"   id="sub">Submit</button>
</form>

POST request:

$("#sub").click(function(){
    var sendf = {
        id: $("#id").val(),                             
        name: $("#name").val()
    };
    $.ajax({
        type: "POST",
        url: "",
        data: sendf,
        dataType: "text",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function(response, status, xhr) {                                                             

        },
    }); //ajax ends
    event.preventDefault();
    $(this).unbind();
});//sub click ends

Am I doing anything wrong? On button click, its just a simple POST request that takes place. Any help is appreciated. Thanks !

Answer 1

The problem is you are intercepting the click action on the button - so the html form validation never takes place and the POST will process happily because you never check that the form is valid before sending it.

It works fine the second time because after the first click you have unbound your click handler and the form submits using a regular form submit event - resulting in the page reloading as it is no longer being handled by the AJAX request (in the now unbound click handler).

If you instead bind your function to the form's submit event, the browser will run the HTML form validation first, before calling your event handler. If you remove the $(this).unbind(); you will continue to submit the form via AJAX and not with a page reload.

use this code ( jsFiddle demo ):

$("form").on("submit", function(ev){
    ev.preventDefault(); //prevent regular form submission via a page reload

    var sendf = {
      id: $("#id").val(),                             
      name: $("#name").val()
    };

    $.ajax({
           type: "POST",
           url: "https://httpbin.org/post",
           data: sendf,
           dataType: "text",
            headers: {
                      'Accept': 'application/json',
                      'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function(response, status, xhr) {                                                             
                console.log(response);
            },

        }); //ajax ends
});//sub click ends

If you do want to disable submitting the form more than once, see this question .

Answer 2

Is there any javascript being executed on it? Because when I import this HTML into a codepen, the required works as expected...

Edit

The event.preventDefault(); is preventing the default behaviour of the "required".