Validate HTML form fields if it is specified with required attribute

Question

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>
            </label>
        <div class="controls">
            <input type="text" class="inputstyle" name="hostname" placeholder="host" required="required" />
</div>

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.

Thanks

UPDATE 1

<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.
            $('#'+$submitform).submit();
    }

Solution 1

I think that below code will help you to solve your issue

HTML

   <form action="insertserverdata.php" id="myForm">
        <input type="text" name="userName">
         <input type="text" name="userPass">
        <input type="submit">
      </form>

JS

 var formRules={userName:{required:true},userPass:{required:true}};

 $("#myForm").validate({rules:formRules});

 $("#myForm").submit(function(event){

 if(! $("#myForm").valid()){

   return;

 }

 });


//Also you can get your form fields by using below code

  var values = {};
  $.each($('#myForm').serializeArray(), function(i, field) {
     values[field.name] = field.value;
  });          

Solution 2

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()
{
    document.forms.form1.submit();
    document.forms.form2.submit();
}

Solution 3

ASSUMPTION: you click on tab, okay thats great you could create a hidden input and change it's value based on the tab you pressed lets illustrate more: you have form1,form2 and form3 on three tabs to toggle between so when you click on specific tab lets say tab1 which leads to form1 onclick you need to call method setVariable "which I made up" this method sets the value of your hidden input to let's say 1, example:

<div id="tab1" onclick="setVariable(1)">

now in you js you have this method:

function setVariable (value){
    document.getElementById('our hiddin input id').value= value;
}

now what? okay now it's time to validate onclick of your submit button you should call the method validateMyForm but which form?? well the form that have the same number as your hidden field watch that:

<input type="submit" onclick="validateMyForm(document.getElementById('hidden input').value)"/>

then in your js:

function validateMyForm(val){
    //use a switch or if-else to know which form you're validating and also which action should be submitted
}

that's pretty much the Idea goodluck