Question

我有一个包含必填字段的表单，除非您填写所需的项目，否则它不会提交表单，它适用于Google Chrome和Firefox，但它在Safari中不起作用。为什么这样，现在有人如何在无法提交表单的地方进行表达，除非填写了所需的项目。这里只是一小部分代码。

<form method="post" action="##" name="aForm" id="addClientForm" class="">
    <input type="hidden" name="method" value="clientAdd">
    <input type="hidden" name="datasource" value="<cfoutput>#request.dsn#</cfoutput>">
    <input type="hidden" name="Active" value="1">

    <div style="float:left;" class="formContent470">
        <table border="0" cellspacing="0" cellpadding="5">
        <tr>
        <th colspan="" style="text-align:left;">Add Client</th>
        </tr>
            <tr><cfoutput>
                <td>
                Contact
                    <span style="color:red">*</span>
                <input type="Text" name="Contact" value="" required="Yes" message="Contact is required" maxLength="75" class="inputText430"> 
                </td>
            </tr>

这是jquery代码应该使它工作我相信。

$(document).ready(function() {
    $("#addClientForm").validate();
        rules: {
            Contact: {
                required: true
            },
            ClientName: {
                required: true
            },
            ClientLogin: {
                required: true
            },
               ClientPassword: {
                required: true
            },
            Email: {
                required: true
            }
        },
});

谢谢，任何帮助表示赞赏。

Answer 1

代码有错误语法..我把params规则放在方法验证上。在你的例子中，你放弃了方法的参数。

$(document).ready(function() {
  $("#addClientForm").validate({
        rules: {
            Contact: {
                required: true
            },
            ClientName: {
                required: true
            },
            ClientLogin: {
                required: true
            },
               ClientPassword: {
                required: true
            },
            Email: {
                required: true
            }
        }
    });
});

Answer 2

您可以在HTML5中使用必需属性来强制填写字段。不需要javascript。

<input type='text' required name='surName'>

Answer 3

这是使其适用于所有浏览器的好方法。

 function hasHtml5Validation () {
    return typeof document.createElement('input').checkValidity === 'function';
   }

 if (hasHtml5Validation()) {
     $('.addClientForm').submit(function (e) {
       if (!this.checkValidity()) {
            e.preventDefault();
      $(this).addClass('invalid'); 
      $('#status').html('invalid');
   } else {
      $(this).removeClass('invalid');
      $('#status').html('submitted');
    }
 });
} 
<p>Status: <span id="status">Unsubmitted</span></p>

提交表格

3 个答案: