2

我创建了一个 JSP 页面，并且在不同的选项卡中有许多表单。所以我添加了一个所有表单共有的提交按钮（所以按钮在 < form > 标签之外）。在每个选项卡上，单击提交时，将使用 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

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

            //validateForm($submitform); // I have not created this function.
            $('#'+$submitform).submit();
    }
4

4 回答 4

1

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

function SubmitAllForms()
{
    document.forms.form1.submit();
    document.forms.form2.submit();
}
于 2013-05-27T10:47:35.003 回答
1

我认为下面的代码将帮助您解决问题

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;
  });
于 2013-05-27T10:57:09.907 回答
1

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

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

现在在你的js中你有这个方法：

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
}

这几乎就是好运的想法

于 2013-05-27T11:14:39.783 回答
0

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

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

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

例如，如果 id 'lname1' (for form1) 不是什么，然后使用 javascript 函数 validate() 检查该表单的所有字段是否已填写。然后，您必须进行错误检查，如果填写了多个表格，一旦表格中的一个字段输入，其他表格将被禁用。

您还可以运行 if 语句 - 关于表单是否已被禁用。

说实话，为每个 for 设置一个提交按钮可能会更容易，错误的机会也更少。

示例名称： 

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/

如果您需要更多反馈或清晰度，请询问。

于 2013-05-27T11:10:37.283 回答