HTML- Require user to fill out at least one text box

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>

I want to make it so the user must fill out at least 1 textbox (no specific textbox, just at least 1 must be filled) before they click a button to navigate them to another page. I think this uses the required attribute, but I'm not sure how to use it correctly in this context.

Possible duplicate of [Checking if alteast one of the text box is filled - Jquery](https://stackoverflow.com/questions/31966525/checking-if-alteast-one-of-the-text-box-is-filled-jquery) — Obsidian Age, Apr 23 '18 at 02:51
Possible duplicate of [How to check that a form has AT LEAST one field filled in](https://stackoverflow.com/questions/12077311/how-to-check-that-a-form-has-at-least-one-field-filled-in) — Jake Reece, Apr 23 '18 at 02:53
Both of the above mentioned answers use jQuery. This user may be looking for a JS only answer, although they have neither JS nor jQuery as a tag, so it could be either. — ecg8, Apr 23 '18 at 02:54

Eric Smith · Answer 1 · 2018-04-23T03:05:00.973

since only one text of many is required, you need to enforce on the client with javascript and, ideally, on the server side as well:

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

Of course there are a number of ways to do this, but you should get the idea.

score 1 · Answer 2 · answered Apr 23 '18 at 05:16

Try this. What you're looking for is an XOR conditional, to compare the booleans of each text field. Unfortunately, JavaScript does not have an XOR operator but you can work around this. Have a look at this, it details using a logical XOR in JavaScript. I applied this method to your form. Please, swap out the alert() calls with whatever you want. If you intend to use this for more text fields, make sure you add them to the long if statement.

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>

The JavaScript MyForm object comes from the HTML, <form name="MyForm">. And each field can be accessed with MyForm.FirstName, MyForm.LastName, etc.

XOR is useful to detect whether _exactly_ one field is nonempty, but it's not necessary or helpful when detecting whether _at least_ one field is nonempty. — Mark Wiemer, Dec 10 '20 at 01:27

HTML- Require user to fill out at least one text box

2 Answers2