0

I want to make sure this form does not post unless there is a value selected in either the company field or the states field:

<form method="POST" name="udate" onsubmit="return anyvalidate();">
<input type="text" name="company">
<select name="states[]" multiple="multiple" >
<option value="California">California</option>
<option value="Colorado">Colorado</option>
</select>
<input type="submit" value="Update"/></div>
</form>

I have tried this code:

<script language="JavaScript"> <!--
function anyvalidate() {
if (       udate.company.value == ""
        ) {
alert( "You need to complete at least 1 field to conduct a search" );
     return false;
     }
     }
//--> </script>

Which works

But when I add the states[] field:

<script language="JavaScript"> <!--
function anyvalidate() {
if (       udate.company.value == ""
&& udate.states[].value == ""
        ) {
alert( "You need to complete at least 1 field to conduct a search" );
     return false;
     }
     }
//--> </script>

The form passes through, even though no state was selected.

If I change the name of the states field to "states" only, without the [], then the code works:

<script language="JavaScript"> <!--
function anyvalidate() {
if (       udate.company.value == ""
&& udate.states.value == ""
        ) {
alert( "You need to complete at least 1 field to conduct a search" );
     return false;
     }
     }
//--> </script>

But then, I need to pass the array if the user selected at least one of the states.

How do I check this type of form, which includes a multiple / array field to make sure at least one of the fields has a value prior to submission?

EDIT

Dear Quentin, the link you cited is pretty remote, and does not expressly state the totality of the issue in such a way that a reasonable search would have 1) found it, and 2) that it would have come close to the solution provided below.

Anybody that takes the time to attempt to look for a 'duplicate' that really isn't a duplicate either doesn't have a job, is 15 years old, is a loser, or they get paid to do it. The only thing that makes sense to me is they get paid to do it.

You comment is irrelevant and not germane to the post. Too bad I don't have the power to delete your post, because I would, as you are the jackass to post it in the first place.

Again, there is almost no relationship between your alleged 'duplicate' and my post.

user6096423
  • 133
  • 1
  • 3
  • 15
  • 3
    Use the `required` attribute. – Randy Casburn Apr 04 '18 at 20:35
  • Did you try and send this to the server? I'm pretty sure it'll just work and multiple values get sent, regardless of how the validation works. (what I mean is use `name="states[]"` for PHP, and use the validation code you posted last) –  Apr 04 '18 at 20:43
  • @RandyCasburn If he adds `required`, the form can no longer be sent with either the `` or the ` –  Apr 04 '18 at 20:46
  • yep. Got it. Thanks – Randy Casburn Apr 04 '18 at 20:49

1 Answers1

1

I think this is what you are after. (I took liberty with the button. I can change it back if you like.)

Simple solution:

let c = document.forms[0].elements['company'];
let s = document.forms[0].elements['states[]'].options

function check() {
  if(!c.value && s.selectedIndex === -1){
  alert('no way! must do one or the other');
  }
}
<form method="POST" name="udate" onsubmit="return anyvalidate();">
  <input type="text" name="company">
  <select name="states[]" multiple="multiple">
<option value="California">California</option>
<option value="Colorado">Colorado</option>
</select>
  <input type="button" value="Check" onclick="check()" />
  </div>
</form>
Randy Casburn
  • 13,840
  • 1
  • 16
  • 31