CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
iamjc015
iamjc015

Reputation: 2235

required attribute not working when submitting forms using submit()

So I have input fields in my form like this:

<input name="blotter_entry_nr" type="text" class="form-control" id="arrest" 
                    placeholder="Enter Blotter No." required>

I submitted the form using the following code:

//handle toolbar event
    $('#toolbarButton').on('toolbarItemClick',
        function (event, buttonClicked) {
            var targetBlock = $(event.target).parents('.article') // get article
            var buttonClickedID = buttonClicked.id // get the id of the button click

            switch (buttonClickedID) {
                case 'saveButton':
                    $( "#case-report-form" ).submit();
                    break;
                case 'menu-remove':
                    removeArticle(targetBlock)
                    break;
            }
    });

//handle form submission
    $("#case-report-form").on('submit',(function(e){
        e.preventDefault();

        var formdata = new FormData(this);  

        CSR.SubmitForm.submit(formdata);
    }));

The problem is, when I dont provide any input on my required fields, the submission still continue. I try to submit the form using a , and the required attributes are working.

Can someone share his/her thoughts regarding this. Thanks.

Upvotes: 0

Views: 2606

Answers (2)

C3roe
C3roe

Reputation: 96338

You are submitting the form via JavaScript, by calling its submit method – and in that case, a possible invalid form state is not supposed to cancel form submission.

HTML5, 4.10.22.3 Form submission algorithm, Step 4:

If the submitted from submit() method flag is not set, and the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then fire a simple event named invalid at the form element and then abort these steps.

Since you are using the submit method to submit your form, the submitted from submit() method flag is set, and therefor the rest of this step does not apply – the browser is not supposed to cancel the submission process at this point, even if the form would be in invalid state. (In fact, the browser is not even supposed to run the validation algorithm in this case.)

You can however check the validity of the form via script as well, before you call the submit method – that’s what the checkValidity method is for.

(You might want to check if the browser supports that method though before calling it – otherwise your code will break in browsers that have not implemented this yet.)

Upvotes: 1

Ana Vinatoru
Ana Vinatoru

Reputation: 191

Ruling out e.preventDefault(); as the cause, as Jack pointed out in his JSFiddle.

The part about the browser version still stands - check if you're not using one of the unsupported browsers for your tests:

http://www.w3schools.com/tags/att_input_required.asp

Upvotes: 0

Related Questions