
Testing validity for either email or phone
By:
lalatino on
Jul 1st, 2012 | syntax:
JavaScript | size: 1.90 KB | hits: 48 | expires: Never
<html><head>
<title>http://stackoverflow.com/questions/11285656/how-to-design-two-inputs-in-or-and-logic-for-email-form-with-validation</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function checkForm(){
var form = document.forms.form1;
var hasError = false;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var mobileReg = /^[+]?[()/0-9. -]{9,}$/; // see also http://stackoverflow.com/q/5066329/1422309
var emailaddressVal = form.email.value.replace(/^\s+|\s+$/g,"");
var mobilenumberVal = form.mobile.value.replace(/^\s+|\s+$/g,"");
var valid1 = emailReg.test(emailaddressVal); //email
var valid2 = mobileReg.test(mobilenumberVal); //mobile
if (form.em[0].checked && !valid1) { //invalid email
$(form.email).parent().next("p").html('<span class="error">Enter a valid email address.</span>');
hasError = true;
} else {
$(form.email).parent().next("p").html('');
}
if (form.em[1].checked && !valid2) { // invalid mobile
$(form.mobile).parent().next("p").html('<span class="error">Enter currect Mobile number.</span>')
hasError = true;
} else {
$(form.mobile).parent().next("p").html('');
}
//alert('Error='+hasError +' EmailOk='+ valid1+ ' MobileOk='+ valid2);
return hasError;
}
</script>
</head><body>
<form name="form1" action="" method="post" onsubmit="return !checkForm()">
<input type="radio" name="em" value="email" /> <label>Email <input type="text" name="email" value="name@server.ext" onclick="this.form.em[0].checked=true" /></label> <p></p><br/>
<input type="radio" name="em" value="mobile" checked="checked" /> <label>Mobile <input type="text" name="mobile" value="1234567890" onclick="this.form.em[1].checked=true" /></label> <p></p><br/>
<input type="submit" name="save_form" value="Send" />
</form>
<input type="button" value="test" onclick="checkForm()" />
</body></html>