Question

我创建了一个JSP页面，我在不同的选项卡中有很多表单。所以我添加了所有表单共有的单个提交按钮（因此该按钮位于＆lt; 表单＆gt;标记之外）。在每个选项卡上，单击提交时，将使用JQuery提交相应的表单。在所有形式中，都需要一些表单字段。我已经使用所需属性指定了这些字段，如下所示

<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>

问题是当我点击提交按钮时，它不会验证所需的字段。如果提交按钮在表单内，则表明它正在工作。但我需要常用的提交按钮。怎么解决这个问题？

我只是在想JQuery我正在提交带有表单动作值的表单。那么在提交之前是否可以通过传递表单ID来调用函数来验证表单并评估所需的字段？如果是这样，请帮我编码。

由于

更新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();
    }

Answer 1

假设您有2个表单（form1和表单2）在按钮单击时提交...您可以在按钮单击事件上调用以下函数。

function SubmitAllForms()
{
    document.forms.form1.submit();
    document.forms.form2.submit();
}

Answer 2

我认为以下代码可以帮助您解决问题

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;
  });

Answer 3

假设：你单击选项卡，好吧，你可以创建一个隐藏的输入并根据你按下的选项卡更改它的值让我们说明更多：你有三个标签上的form1，form2和form3来切换，所以当你点击在特定的选项卡上让我们说tab1导致form1 onclick你需要调用方法setVariable“我编造了”这个方法设置隐藏输入的值让我们说1，例如：

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

现在你们有了这个方法：

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

现在怎么样？好的，现在是时候验证你的提交按钮的onclick你应该调用方法validateMyForm但是哪种形式？以及与您的隐藏字段具有相同编号的表单：

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

然后在你的js：

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

这几乎就是Idea goodluck

Answer 4

您可以使用客户端或服务器端脚本验证数据。你在这里要求一个javascript解决方案，这是有效的。因为除非数据有效，否则javascript将阻止提交任何内容。

您需要使用switch或if语句来选择要提交的表单。你需要有一个标识符这是算法：

当您使用表单ID时如果您需要完成某些字段，则只需验证表单。表单id的getElementByID是完美的，使用if或switch选择要验证的表单然后提交

例如，如果id'lname1'（对于form1）不是什么并使用javascript函数validate（）来检查该表单的所有字段是否已填充。如果填写了多个表单，则必须进行错误检查，一旦表单中的一个字段输入，其他表单将被禁用。

您还可以运行if语句，以确定表单是否已被禁用。

说实话，为每个人提供一个提交按钮可能会更容易，也可以减少错误。

示例名称：

function Validate()
        {


        // create array containing textbox elements
        var inputs = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email'), document.getElementById('messagetxt')];

        var error;

        for(var i = 0; i<inputs.length; i++)
        // loop through each element to see if value is empty
        {
            if(inputs[i].value == '')
            {
                error = 'Please complete all fields.';
                alert(error);
                return false;
                }
        }
     }


     <form onsubmit="return Validate();"  action="contact.php" method="post" name="contact1" id="contact1"  >


        <input class="input" type="text" placeholder="First Name" name="fname" id="fname" />


        <input class="input" type="text" placeholder="Last Name" name="lname" id="lname"/>

        <input class="input" type="email" placeholder="Email Address" name="email"  id="email"/>

      <textarea placeholder="Message" name="messagetxt" id="messagetxt"></textarea>

    </form>  

     <form onsubmit="return Validate();"  action="contact.php" method="post" name="contact2" id="contact2" >
 //insert form details

    </form>  

        <input type="submit" value="submit" name="submit"  />

看到这个小提琴：

http://jsfiddle.net/yvytty/b3qdN/

如果您需要更多反馈或清晰请求。

如果使用required属性指定，则验证HTML表单字段

4 个答案: