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中使用逻辑XOR进行了详细说明。我将此方法应用于您的表单。请用您想要的任何内容换掉alert()来电。如果您打算将其用于更多文本字段，请确保将它们添加到长if语句中。

＆＃13;

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);
}

＆＃13;

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;
 }

＆＃13;

<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>

＆＃13;

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

Answer 3

必需属性仅在表单内可用，请尝试将表格分组为表格：

<form action="">
<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>
</form>

以下是有关此主题的更多信息：Form inside a table

正如埃里克指出的那样，无论如何，在JavaScript中更容易做到这一点。

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

3 个答案: