Forum Moderators: open

Message Too Old, No Replies

Form validation

need at least one of 3 fields filled in

         

Adam_C

8:21 pm on May 11, 2004 (gmt 0)

10+ Year Member



Need a js form validation script that requires at least one of 3 fields to be filled in, plus 2 other manditory fields.

Client is getting shirty... and this is now urgent.

Help appreciated.
Cheers

DrDoc

8:28 pm on May 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What does your current JavaScript look like?
I assume you also have something in place on the server, correct?

Adam_C

9:34 pm on May 11, 2004 (gmt 0)

10+ Year Member



Have got a really basic one...

function checkrequired(which){
var pass=true
if (document.images){
for (i=0;i<which.length;i++){
var tempobj=which.elements[i]
if (tempobj.name.substring(0,8)=="required"){
if (((tempobj.type=="text"¦¦tempobj.type=="textarea")&&tempobj.value=='')¦¦(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)){
pass=false
break
}
}
}
}
if (!pass){
alert("One or more of the required fields have not been completed. Please complete them, then submit again.")
return false
}
else
return true
}

<form name="form" method="POST" action="cgi-bin/osdihfs.cgi" onSubmit="return checkrequired(this)">

....

<textarea name="required-text" rows="6" cols="40"></textarea>

......

etc

Adam_C

8:36 am on May 12, 2004 (gmt 0)

10+ Year Member



AAahhhhhhhhh

Deadline fast approaching!

dcrombie

9:19 am on May 12, 2004 (gmt 0)



<SCRIPT type="text/javascript"> 
...
if(form.input1.value == "" && form.input2.value == "" && form.input3.value == "") {
alert("you need to complete one of these fields");
return false;
}
...
</SCRIPT>

creative craig

10:07 am on May 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Still having the same problems (same client, same company).

I inserted the JavaScript into the head section of the document. Does it require a function name and then should I add an onsubmit command in the form tag? In the areas that I am wanting to check should they be given the name="input1" "input2" etc...?

I must admit I am not in the least bit JavaScript savvy :(

ppg

11:21 am on May 12, 2004 (gmt 0)

10+ Year Member



Hiya,

>Does it require a function name
yes

>should I add an onsubmit command in the form tag?
yes

> should they be given the name="input1" "input2" etc...?
yes.

However, the logic of dcrombie's function will allow the form to submit as long as ALL those three fields have a value, if I've got Adam right, he wants ANY ONE of three possible fields filled in - have I got that right?

If so, this should do that section of the validation:


function validate(form) {
if( form.one.value!="" ¦¦ form.two.value!="" ¦¦ form.three.value!="" ) {
return true;
}
else{
alert("complete at least one field");
return false;
}
}

If I've got you right. I'm no js guru either, but I think that will work.

form would be:


<form name="theform" method="post" action="whatever.htm" onSubmit="javascript:return validate(this)">
<p>
<input type="text" name="one">
</p>
<p>
<input type="text" name="two">
</p>
<p>
<input type="text" name="three">
</p>
<p>
<input type="submit" value="submit form" name="submit">
</p>
</form>

Just reiterating though - your not relying on that data being right for anything are you? If so, it should be validated server side, but I guess you know that :-)

ppg

11:26 am on May 12, 2004 (gmt 0)

10+ Year Member



>However, the logic of dcrombie's function will allow the form to submit as long as ALL those three fields have a value

Actually, scratch that. I've just thought about it and that original logic will work too :-)

Now where's my coffee mug?

sonjay

12:54 pm on May 12, 2004 (gmt 0)

10+ Year Member



Here's the script I used, when I needed the exact same thing. It checks to make sure that AT LEAST ONE of home phone, work phone, e-mail or fax is filled in, and checks the e-mail to make sure it's in valid e-mail format:

<SCRIPT language="JavaScript">
<!--
<!-- Original: Wayne Nolting (w.nolting@home.com) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source! [javascript.internet.com...] -->

<!-- Begin
function verify() {
var themessage = "Please complete at least one of the following fields: ";
if (document.res.email.value=="")
if (document.res.workphone.value=="")
if (document.res.homephone.value=="")
if (document.res.fax.value=="")
{
themessage = themessage + "- E-mail, Work Phone, Home Phone or Fax";
}
//alert if fields are empty and cancel form submit
if (themessage == "Please complete at least one of the following fields: ")

{
document.res.submit();
}

else {
alert(themessage);
return false;
}
}

//function to check valid email address
function isValidEmail(strEmail){
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = document.res.email.value;

// search email text for regular exp matches
if (strEmail.search(validRegExp) == -1)
{
alert('Please enter a valid e-mail address');
document.res.email.value="";
document.res.email.focus();
return false;
}
}

// End -->
</script>

Inside my form tag I have this:

onSubmit="verify(); return false"

The form field tags don't need anything special, except you have to make sure the field name exactly matches the field name referenced in the js.

Bernard Marx

1:26 pm on May 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Did you really find that in a script library?

The regexp is a good idea, the nested IF's are a bit over the top, but they should work.
Not so sure about testing by seeing if the message string remains unchanged, that's well clumsy. The function would also be better off being sent the form as an argument. The object reference, document.res may have trouble in standards-compliant browsers.

sonjay

1:43 pm on May 12, 2004 (gmt 0)

10+ Year Member



I dunno.... I know so little about javascript it's not even funny. But I tested it in IE and Mozilla on PC and in IE, Mozilla and Safari on Mac, and it worked as advertised. Given the client's budget, that was good enough for me. (There's the ideal, and there's the reality, and reality is all too often dictated by client budget constraints.)

What's non-standards-compliant about document.res?

dcrombie

1:54 pm on May 12, 2004 (gmt 0)



Why would you take the time to write something in <10 lines that's compliant when you can grab code from someone else that's 10x more complicated and not. Isn't WW meant to be about learning?
</rant> ;)

Bernard Marx

2:05 pm on May 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



sonjay

True, "if it ain't broke, don't fix it".

Hmm, standards compliance. Maybe it is. It must rely on 'DOM 0'. I don't know whether that kind of referencing is deprecated - or just left alone.

It's just that the function has some strange inefficiencies, and, as the form name is hard-coded, would need to be duplicated if there's another form to be handled. I'm a little surprised that a script library would accept something like that (maybe not).

Even considering [ref to 1st line of this post], if the client gets another scripter to have a tinker later, he/she may well suggest that whatever they paid you was a little too much. I don't mean that in a rude way. It's just that scripts like that are the motivation for bods like me to make posts like this. There's nowt wrong with not having a lot of JavaScript under your belt - it's why your here presumeably, and I bet you can design far better than many of us who think they 'know better' in scripting.