Javascript – Validate HTML form fields if it is specified with required attribute


I created a JSP page and I have many forms each in different tabs. So I have added a single submit button common to all forms(So the button is outside of the <form> tag). On each tab, when the submit is clicked, the appropriate forms are being submitted using JQuery. In all forms some form fields are required. And I have specified those fields with the required attribute like the following

<div class="control-group">
        <label class="control-label input-label" for="hostname">Host :
                    <span class="requiredField"> * </span>
        <div class="controls">
            <input type="text" class="inputstyle" name="hostname" placeholder="host" required="required" />

The problem is when I click on submit button, it does not validate fields which are required. If the submit button is inside the form, it's working. But I need common submit button. How to solve this?

I am just thinking in JQuery I am submitting form with form action value. So before submitting is it possible to call function to validate form by passing form ID and evaluate the required fields? If so, please help me to code.



<button type="submit" id="submitbtn" class="btn btn-primary inputstyle" onclick="submitForm();">SUBMIT</button>

JQuery for this

function submitForm() {
            var $submitform=$('#formId').val();

            //validateForm($submitform); // I have not created this function.

Best Solution

Assume you have 2 forms (form1 and form 2) to submit on button click... you can call the following function on button click event.

function SubmitAllForms()