使用一个 jquery 文件在一个 php 页面中验证 3 个表单答案

【问题标题】：Validate 3 forms in one php page using one jquery file使用一个 jquery 文件在一个 php 页面中验证 3 个表单
【发布时间】：2016-02-07 12:29:48
【问题描述】：

我在同一个 php 页面中有 3 个表单。每个表单包含相同的输入字段（具有不同的名称）并且每个表单在提交后的操作也不同。一个用于在数据库中插入新记录，另一个用于更新同一记录，最后一个用于删除该记录。

我想在一个 jquery 脚本中验证所有这些。所以，我这样做了：

表格：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- jQuery Validation Plugin 
hosted by Google API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- jQuery Library -->
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){  

    $('#showadd').click(function() {
                $('.add').toggle("slide");
                $('.update').hide();
                $('.delete').hide();
        });

    $('#showupdate').click(function() {
                $('.update').toggle("slide");
                $('.add').hide();
                $('.delete').hide();
        });

    $('#showdelete').click(function() {
                $('.delete').toggle("slide");
                $('.update').hide();
                $('.add').hide();
        });

    $('input.text').keyup(function () {
        $('input.link').prop('disabled', this.value.length === 0 ? false : true);
        $('input.evidence').prop('disabled', this.value.length === 0 ? false : true);
    });

    $('input.link').keyup(function () {
        $('input.text').prop('disabled', this.value.length === 0 ? false : true);
        $('input.evidence').prop('disabled', this.value.length === 0 ? false : true);
    });

    $(".evidence").on("change", function(){
          if($.trim($(".evidence").val())){
            $('.link').attr("disabled", "disabled");
            $('.text').attr("disabled", "disabled");
        }else{$('.link').removeAttr('disabled');$('.text').removeAttr('disabled');}
    });
});
</script>
</head>
<body>
<div id="showadd">Add Evidence</div>
    <br>
    <div class="add" style="display:none">
      <form action="institutionLevel.php" method="post" enctype="multipart/form-data" id="inst-form" novalidate>
          <div class="formLayout">
          <div class="required">
          <label>Evidence Category</label>
          <select name="category">
          <option value="none"></option>
          <option value="Mission Goals and Objectives">Mission, Goals and Objectives</option>
          <option value="Governance and Administration">Governance and Administration</option>
          <option value="Management of Quality Assurance and Improvement">Management of Quality Assurance and Improvement</option>
          <option value="Learning and Teaching">Learning and Teaching</option>
          <option value="Student Administration and Support Services">Student Administration and Support Services</option>
          <option value="Learning Resources">Learning Resources</option>
          <option value="Facilities and Equipment">Facilities and Equipment</option>
          <option value="Financial Planning and Management">Financial Planning and Management</option>
          <option value="Employment Processes">Employment Processes</option>
          <option value="Research">Research</option>
          <option value="Relationships with the Community">Relationships with the Community</option>
          </select>
          </div>
          <br>
          <div class="required">
            <label>Evidence Title</label>
            <input type="text" name="title"/>
          </div>
          <br>
          <div class="required">
          <label>Evidence File</label>
          <input type="file"  name="evidence" id="evidenceToUpload" class="evidence"> 
          <label id="evidenceSize"></label> 
          </div>
          <br>
          <div class="required">
          <label>Evidence Link</label>
          <input type="text" name="eviLink" class="link"/>
          </div>
          <br>
          <div class="required">
          <label>Physical Evidence</label>
          <input type="text" name="eviText" class="text"/>
          </div>
          <br>
        <input type="submit" name="add" value="Add" class="styled_button"/>
         </div>
      </form>
      <br>
    </div>
    <div id="showupdate">Update Evidence</div>
    <br>
    <div class="update" style="display:none">
      <form action="institutionLevel.php" method="post" enctype="multipart/form-data" id="inst-form" novalidate>
          <div class="formLayout">
          <div class="required">
          <label>Evidence Category</label>
          <select name="category_update">
          <option value="none"></option>
          <option value="Mission Goals and Objectives">Mission, Goals and Objectives</option>
          <option value="Governance and Administration">Governance and Administration</option>
          <option value="Management of Quality Assurance and Improvement">Management of Quality Assurance and Improvement</option>
          <option value="Learning and Teaching">Learning and Teaching</option>
          <option value="Student Administration and Support Services">Student Administration and Support Services</option>
          <option value="Learning Resources">Learning Resources</option>
          <option value="Facilities and Equipment">Facilities and Equipment</option>
          <option value="Financial Planning and Management">Financial Planning and Management</option>
          <option value="Employment Processes">Employment Processes</option>
          <option value="Research">Research</option>
          <option value="Relationships with the Community">Relationships with the Community</option>
          </select>
          </div>
          <br>
          <div class="required">
            <label>Evidence Title</label>
            <input type="text" name="title_update"/>
          </div>
          <br>
          <div class="required">
          <label>Evidence File</label>
          <input type="file"  name="evidence_update" id="evidenceToUpload_update" class="evidence"> 
          <label id="evidenceSizeUpdate"></label> 
          </div>
          <br>
          <div class="required">
          <label>Evidence Link</label>
          <input type="text" name="eviLink_update" class="link"/>
          </div>
          <br>
          <div class="required">
          <label>Physical Evidence</label>
          <input type="text" name="eviText_update" class="text"/>
          </div>
          <br>
        <input type="submit" name="update" value="Update" class="styled_button"/>
         </div>
      </form>
      <br>
    </div>
    <div id="showdelete">Delete Evidence</div>
    <br>
    <div class="delete" style="display:none">
      <form action="institutionLevel.php" method="post" enctype="multipart/form-data" id="inst-form" novalidate>
          <div class="formLayout">
          <div class="required">
          <label>Evidence Category</label>
          <select name="category_delete">
          <option value="none"></option>
          <option value="Mission Goals and Objectives">Mission, Goals and Objectives</option>
          <option value="Governance and Administration">Governance and Administration</option>
          <option value="Management of Quality Assurance and Improvement">Management of Quality Assurance and Improvement</option>
          <option value="Learning and Teaching">Learning and Teaching</option>
          <option value="Student Administration and Support Services">Student Administration and Support Services</option>
          <option value="Learning Resources">Learning Resources</option>
          <option value="Facilities and Equipment">Facilities and Equipment</option>
          <option value="Financial Planning and Management">Financial Planning and Management</option>
          <option value="Employment Processes">Employment Processes</option>
          <option value="Research">Research</option>
          <option value="Relationships with the Community">Relationships with the Community</option>
          </select>
          </div>
          <br>
        <input type="submit" name="delete" value="Delete" class="styled_button"/>
         </div>
      </form>
      <br>
      <br>
    </div>
</body>
</html>

jquery：

// JavaScript Document
//jQuery Form Validation code

(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules

    // Setup form validation on the #register-form element
    $("#inst-form").validate({
        errorElement: 'div',
        // Specify the validation rules
        rules: {
            category: 
            {
            checkEviCategory: true,
            },
            title: 
            {
            required: true,
            },
            evidence:
            {
                accept: "pdf",
                required: true,
                checkEvidence: true,
            },
            eviLink:{
                required: true,
            },
            eviText:
            {
            required: true, 
            },

            category_update: 
            {
            checkEviCategory: true,
            },
            title_update: 
            {
            required: true,
            },
            evidence_update:
            {
                accept: "pdf",
                required: true,
                checkEvidenceUpdate: true,
            },
            eviLink_update:{
                required: true,
            },
            eviText_update:
            {
            required: true, 
            },

        },

        // Specify the validation error messages
        messages: {
            title: 
            {
            required: "Enter evidence title",
            },
            EviLink: 
            {
            required: "Enter evidence link",
            },
            EviText: 
            {
            required: "Enter the physical location‬‏ of the evidence",
            },
            evidence:{
            accept: "Upload pdf document only",
            required: "Upload ..",
            },

            title_update: 
            {
            required: "Enter evidence title",
            },
            eviLink_update: 
            {
            required: "Enter evidence link",
            },
            eviText_update: 
            {
            required: "Enter the physical location‬‏ of the evidence",
            },
            evidence_update:{
            accept: "upload pdf document only",
            required: "Upload ..",
            },
            },

        submitHandler: function(form) {
            form.submit();
                }
            });

            jQuery.validator.addMethod('checkEviCategory', function (value) {
        return (value != 'none');
    }, "Select evidence category");

jQuery.validator.addMethod('checkEvidence', function () {
    if(!$("#evidenceToUpload").val() == '')
    {   
    var iSize = ($("#evidenceToUpload")[0].files[0].size / 1024); 
     if (iSize / 1024 > 1) 
     { 
        if (((iSize / 1024) / 1024) > 1) 
        { 
            iSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
            $("#evidenceSize").html( iSize + " GB"); 
        }
        else
        { 
            iSize = (Math.round((iSize / 1024) * 100) / 100)
            $("#evidenceSize").html( iSize + " MB"); 
        } 
     } 
     else 
     {
        iSize = (Math.round(iSize * 100) / 100)
        $("#evidenceSize").html( iSize  + " KB"); 
     }   
     return (iSize<4294967295);  // 4GB is 4,294,967,295 bytes
    }
    return true;
    }, "File exceeded 4GB");

    jQuery.validator.addMethod('checkEvidenceUpdate', function () {
    if(!$("#evidenceToUpload_update").val() == '')
    {   
    var iSize = ($("#evidenceToUpload_update")[0].files[0].size / 1024); 
     if (iSize / 1024 > 1) 
     { 
        if (((iSize / 1024) / 1024) > 1) 
        { 
            iSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
            $("#evidenceSizeUpdate").html( iSize + " GB"); 
        }
        else
        { 
            iSize = (Math.round((iSize / 1024) * 100) / 100)
            $("#evidenceSizeUpdate").html( iSize + " MB"); 
        } 
     } 
     else 
     {
        iSize = (Math.round(iSize * 100) / 100)
        $("#evidenceSizeUpdate").html( iSize  + " KB"); 
     }   
     return (iSize<4294967295);  // 4GB is 4,294,967,295 bytes
    }
    return true;
    }, "File exceeded 4GB");
}}
    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

结果：

只验证第一个表单！！

如何以最简单的原因修复此问题（更改最少）。

另外，我是 jquery 的初学者，我讨厌动态分配规则和消息（我为同一案例找到的答案）。

【问题讨论】：

标签： php jquery forms validation

【解决方案1】：

ID 对于页面上的每个元素都是唯一的，将您的 id 更改为唯一的，然后您可以添加一个特定的类并取消它以进行验证，而不是 ID。只要该类附加到所有 3 个表单并且验证也是如此，那么它应该可以工作。

例如。

    <form action="institutionLevel.php" method="post" enctype="multipart/form-data" class="inst-form" id="form1" novalidate>

   <form action="institutionLevel.php" method="post" enctype="multipart/form-data" class="inst-form" id="form2" novalidate>

   <form action="institutionLevel.php" method="post" enctype="multipart/form-data" class="inst-form" id="form3" novalidate>

这是您如何调用表单的示例（显然不是这样的一行），那么您的验证将是：

 $(".inst-form").validate({

这可能会导致问题，我不太确定，因为我还没有测试过。

【讨论】：

我试过这个（class="inst-form" insted of id="inst-form"），它没有用:")
添加 id="form1", id="form2" 和 id="form3" 的意义何在？
我猜他们不需要。 stackoverflow.com/questions/19208987/…检查那个页面有你的问题的答案
这不是我需要的答案 :( 验证没有规则也没有自定义消息
如果您阅读了 cmets 它说：但是，您不能将 .validate() 方法附加到任何代表多个表单的 jQuery 选择器，因为这正是开发人员设计他的插件的方式。按照我的回答中的说明使用 .each()：