如何使第一对字段成为必填字段，其余字段不需要

Question

尝试构建一个函数，其中至少需要一对字段对 s_AAA/s_BBB 才能提交表单。用户有机会提交最多 5 个 s_AAA/s_BBB 组合。将此视为您最多可以推荐五个朋友的表格，但必须至少提交 1 个才能提交表格。

感谢任何帮助！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
  <script type="text/javascript">      
     (function ($, W, D) {
         var SIGNUPVALIDATION = {};

         SIGNUPVALIDATION.UTIL = {
             setupFormValidation: function () {
                 //form validation rules
                 $("#friend_req").validate({
                     rules: {
                         s_referee_email: "required",
                         s_referee_fname: "required", 

                     },
                     messages: {
                         s_referee_email: "Please enter at least one friend's email address",
                         s_referee_fname: "Please enter your friends first name",
                     },
                     submitHandler: function (form) {
                         form.submit();
                     }
                 });
             }
         }
         //when the DOM has loaded setup form validation rules
         $(D).ready(function ($) {
             SIGNUPVALIDATION.UTIL.setupFormValidation();
         });

     })(jQuery, window, document);
  </script>

Answer 1

除非您特别希望在 javascript 中执行此操作，否则您只需将 required 添加到 HTML5 表格即可。例如：

<input type="text" name="usrname" required>

然后问题变成了 Safari - 如果必填字段留空，它不会提交表单 - 但也不会向用户呈现错误。您的用户将坐在那里不知道为什么表单不会提交。在这种情况下，您可以使用一些 JS 来做到这一点。您可能会问为什么不直接在 JS 中执行并跳过 HTML 验证？好吧，我想这是个人决定，但我喜欢使用组合方法只是因为我喜欢 HTML 验证在其他浏览器中为您提供的小弹出窗口。

如果您打算在 JS 中执行此操作，您将创建一个函数来获取您想要验证的输入，如下所示：

nameInput   = document.querySelector("#name").value

从那里你可以检查输入是否有长度，如果你想确保它满足特定的最小字符数，或者你可以使用 .test() 检查它是否有值像这样的东西：

/^[a-zA-Z]+/.test(nameInput)

从那里开始，如果是，则继续提交，如果不是，则向用户发出错误消息：

*assuming you have a div with a class of "error", if not you could create one dynamically

else {
  error.innerHTML = "You must provide a name.";
}

如何使第一对字段成为必填字段，其余字段不需要

How to make first pair of fields required, and rest not required

javascript

forms

jquery

jquery-validate