HTML - 要求用户填写至少一个文本框

Question

<tr><td> First Name: </td><td><input type="text" name="FirstName" required></td> </tr>
<tr><td> Last Name: </td><td><input type="text" name="LastName" required> </td></tr>
<tr><td> Member Number: </td><td><input type="text" name="MemberNum"> </td></tr>
<tr><td> Telephone: </td><td><input type="text" name="PhoneNum"> </td></tr>
<tr><td> Email: </td><td><input type="text" name="Email"> </td></tr>

我想让用户在单击按钮导航到另一个页面之前必须填写至少 1 个文本框（没有特定的文本框，只需填写至少 1 个）。我认为这使用了required 属性，但我不确定如何在这种情况下正确使用它。

Answer 1

由于只需要多个文本中的一个，因此您需要使用 javascript 在客户端强制执行，理想情况下，还需要在服务器端强制执行：

   function validateEmail()
      {
         if( document.formname.firstName.value == "" &&
             document.formname.lastName.value == "" &&
             ... )
         {
            alert( "At least one field is required" );
            document.formname.FirstName.focus();
            return false;
         }
       ...

当然有很多方法可以做到这一点，但你应该明白。

Answer 2

试试这个。您正在寻找的是一个 XOR 条件，用于比较每个文本字段的布尔值。不幸的是，JavaScript 没有 XOR 运算符，但您可以解决这个问题。 Have a look at this，它详细介绍了在 JavaScript 中使用逻辑异或。我将此方法应用于您的表单。请将alert() 电话换成你想要的任何东西。如果您打算将其用于更多文本字段，请确保将它们添加到长 if 语句中。

function submitform() {
    if ( (MyForm.FirstName.value != null || MyForm.LastName.value != null ||
         MyForm.MemberNum.value != null || MyForm.PhoneNum.value != null ||
         MyForm.Email.value != null) && !(MyForm.FirstName.value == "" &&
         MyForm.LastName.value == "" && MyForm.MemberNum.value == "" &&
         MyForm.PhoneNum.value == "" && MyForm.Email.value == "")) {
         alert("Form is okay!");
         return (true);
     }
     alert("You must enter at least one field!");
     return (false);
}

table, table tbody { width:99%; }
tr { width:100%; }
td { width:49%;
     padding:5px;
     font-size:1.03em;
     background-color:tan;
     border:1px solid black;
 }
 input[type="text"] {
     width:95%;
     font-size:1.03em;
 }
 button {
     background-color:#dd0307;
     border:2px solid white;
     color:white;
     padding:8px;
     font-size:1.07em;
 }

<form name="MyForm">
    <table><tbody>
    <tr><td> First Name: </td><td><input type="text" name="FirstName" /></td> </tr>
    <tr><td> Last Name: </td><td><input type="text" name="LastName" /> </td></tr>
    <tr><td> Member Number: </td><td><input type="text" name="MemberNum" /> </td></tr>
    <tr><td> Telephone: </td><td><input type="text" name="PhoneNum" /> </td></tr>
    <tr><td> Email: </td><td><input type="text" name="Email" /> </td></tr>
    </tbody></table>
    <button onclick="return submitform();">Submit</button>
</form>

JavaScript MyForm 对象来自 HTML，<form name="MyForm">。并且每个字段都可以通过MyForm.FirstName、MyForm.LastName等方式访问。