Want to make e-mail validation conditional based on yes/no radio button

[DangerBoy_Roj]

Hi Everyone,

I am just new to this forum and I have to admit I'm not much of a programmer. No formal training, just self taught and I don't know a whole lot so please explain things in fairly simple terms. I'm not completely stupid at this, however, so you don't have to dumb it down completely for me. I'm currently programming my website for my home business with Namo WebEditor and am using UltraMenu to create a slick looking Javascript based menu system for it. The website is coming along ok and is not too shabby for having been programmed by a rank beginner IMHO . The website is www.volvosolutions.com if you want to look at it. What's up there now is just a first draft and I will soon be uploading a much improved and expanded version of it shortly.

But I digress...

I am trying to set up a simple feedback/suggestions/questions form on my site and I can't seem to find a "canned" javascript to do this one thing that I want to do.

On my form I have a text box for the viewer to enter their e-mail address into as well as a menu field for them to be able to select the topic of the message and a scrolling text box for them to enter their comments/suggestions/questions, etc.

Below that I ask if they want a reply by e-mail and follow that with a pair of radio buttons, one being for yes and the other being for no. The default is "No". I think the name of the radio button element is rb1.

Then I have a submit button. Pretty basic.

What I want to have happen is that when the user clicks the Submit button a script runs that looks first at RB1ns to see what it's set to and only do an e-mail validation IF the radio button is set to "yes". If set to no, I want it to skip the e-mail validation and just let the message get submitted as is. If RB1 is set to "yes" I want it to prevent the form data from being submitted and to display a message box warning that they need to enter a valid e-mail addy in the e-mail field.

Threre are lots of free e-mail validation scripts out there so I'm guessing I can just use one of those doing the last part part. I just basically need to know how to set up a script to make the executing of the e-mail validation script conditional based on the status of RB1.

If someone wants to recommend a good free e-mail validation script that I should use that would be great. There are many to choose from and I could use some guidance in choosing one that's both real easy to use and works well.

Thanks heaps !

DBR

[fangfoo]

Can I ask why? Doesn't seem to make much sense to have validation optional.

That aside just write a function that checks the value of RB1 and if it equal yes then run validation code, else end?

[DangerBoy_Roj]

Originally Posted by fangfoo

Can I ask why? Doesn't seem to make much sense to have validation optional.

I don't want them to have to enter their e-mail address if they don't want a reply. Just a privacy thing I guess. The default text in the e-mail field will be something like "Fill this out if you want a reply" or something to that effect.

That aside just write a function that checks the value of RB1 and if it equal yes then run validation code, else end?

Yeah, I kinda figured that's what to do. I just don't know how to code it. Can you please show me the syntax for that including how I call the validation script ? Thanks

[rangana]

What's the name of your form? Let me take for instance myform.

document.myform.onsubmit=function()
{
if(document.myform.rb1.checked=false)
this.submit();
else
validate();
}

Hope it helps.

[Philip M]

A more extended version:-

document.myform.onsubmit = function() {
if (document.myform.rb1[1].checked) {  // email opted for
if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i.test(emailAddress.value))) { 
alert ("The email address you entered is not valid!  Try again. );
return false;
}
}
else {
this.submit();
}
}

(EDIT)

You should note that Javascript is case sensitive so rb1 is not the same as RB1. Also, it is the group of radio buttons which is named rb1 and the individual buttons are referenced as rb1[0] and rb1[1]. The regular expression checks that the email address is valid syntactically, but of course the user may enter his address incorrectly (mis-spelled etc.) Another/additional and possibly better "validation" is to make the user enter the address twice and check that the two match.



All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[DangerBoy_Roj]

Thanks for your help guys.

I tried using that code that you gave me but it doesn't seem to work. I must've done something wrong.

The form's name is form1

the radio button's name is fdbk_radio1 The options are Yes, No so I assume I would check fdbk_radio1[0] to validate that an e-mail reply has been opted for.

The e-mail address field is called E-mail

Internet Explorer says the first line with document.form1 is null or not an object

FireFox's Error console says document.form1 has no properties.

Here's how I have it coded in the HEAD section of my page:

<script language="JavaScript">

document.form1.onsubmit = function() {
if (document.form1.fdbk_radio1[0].checked) {  // email opted for
if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i.test(E-mail.value))) { 
alert ("The email address you entered is not valid!  Please try again or use radio buttons to opt out of receiving reply." );
return false;
}
}
else {
this.submit();
}
}
</script>

What did I do wrong or what am I missing here ?

Thanks again

[Philip M]

Given your assigned names,

<script type = "text/JavaScript">

document.form1.onsubmit = function() {
if (document.form1.fdbk_radio1[0].checked) {  // email opted for
em = document.form1.Email.value;
if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i.test(em))) { 
alert ("The email address you entered is not valid!  Please try again or use radio buttons to opt out of receiving reply." );
return false;
}
}
else {
this.submit();
}
}
</script>

Note that E-mail is not a valid name. JavaScript names can contain only letter, numbers and the underscore character. So must rename to Email. IMHO the underscore is troublesome as well - prefer to use Hungarian notation (a posh expression for camel-case). fdbkRadio1 etc.


The following may help you test your script:-

<form name = "form1">
<input type = "text" name = "Email" size = "40" ><br>
Yes<input type = "radio" name = "fdbk_radio1" value = "Yes" checked>
No<input type = "radio" name = "fdbk_radio1" value = "No"><br>
<input type = "submit" value = "Submit Form"  action ="">
</form>


<script type = "text/JavaScript">  // the language attribute is deprecated
document.form1.onsubmit = function() {
if (document.form1.fdbk_radio1[0].checked) {  // email opted for
em = document.form1.Email.value;
if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i.test(em))) { 
alert ("The email address you entered is not valid!  Please try again or use radio buttons to opt out of receiving reply." );
return false;
}
}
else {

alert ("OK");
this.submit();
}
}
</script>

[DangerBoy_Roj]

Thanks for the help.

I couldn't get it to work at first but then I finally realized the script had to be in the Body part below where the form is defined and not up in the Head part where I had it originally.

Now it mostly works except there's one issue:

When I do a submit when the user has opted NOT to get a response I get an error message. The FireFox error console says "this.submit is not a function". IE says "Object doesn't support this property or method" and points to the same line as FireFox does which is the line that says this.submit();

First question is why is this happening ?

Second question is why does it only happen when you try to submit a message and the user has opted out of a response but does not happen on submit when the user has opted for a response ? Is the script submitting in both cases or is there a logic error there somewhere ? Seems to me it should happen in both cases when the script tries to submit the message.

Thanks,

DBR

[rangana]

Have you tried replacing this.submit() to return true; instead?