cómo diseñar dos entradas en o/y lógica para formulario de correo electrónico con validación

My purpose is user enter only email or mobile number. I have the partial success in that code notify user in OR logic

pero ... if user want to give both details to me email & mobile no. and entered that info incorrectly then he/she will notified for that to current the data.

<form action="index.php" method="post">
    <label for="email">Your E-Mail Address *</label>
       <input id="UserEmail" type="text" name="email" maxlength="80" size="30"/>
            </p><p>
             Or   
             </p><p>
    <label for="mobile">Mobile Number *</label>
     <input id="mobile" type="text" name="mobile" maxlength="50" size="30" /></p>

below is jquery code

var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $("#UserEmail").val();

// email & mobile input cheak
if(emailaddressVal == '' && $("#mobile").val() == '') {
    $("#UserEmail").after('<p><span class="error">Please enter your email address.</span></p>')
    $("#mobile").after('<p><span class="error">Please enter your Mobile number.</span></p>')
    hasError = true;
}  
// validating currect email
else if(!emailReg.test(emailaddressVal)) {
    $("#UserEmail").after('<p><span class="error">Enter a valid email address.</span></p>') 
    hasError = true;
} 
// Mobile number
else if( $("#mobile").val()) {
    $("#mobile").after('<p><span class="error">Enter currect Mobile number.</span></p>')
    hasError = true;
}

preguntado el 01 de julio de 12 a las 22:07

What is your question? I don't get the point. -

ok my purpose is user must enter email or mobile number for my contact form. in case, if he/she wants to give the both detail & details are in-currently entered then form will notify the user to enter current the details -

2 Respuestas

you can solve your problem easily using the radio button:

<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>

Then your javascript can look like this:

function checkForm(){
    var form = document.forms.form1;
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var mobileReg = /^[+]?[()/0-9. -]{9,}$/;
    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;
}

Esta es el código de trabajo.

Respondido 02 Jul 12, 02:07

La solución está aquí

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var mobileReg =  /^\d\d\d\d\d\d\d\d\d\d$/m;
    var emailaddressVal = $("#UserEmail").val();
    var mobileval = $("#mobile").val();

   //state chk both blank if yes alert
   //OR logic 0-0 
    if(emailaddressVal == '' && mobileval == '') {
        $("#UserEmail").after('<p><span class="error blurry">Please enter your email address.</span></p>')
        .effect("shake", { times:3 }, 20); console.log("email");
        $("#mobile").after('<p><span class="error blurry">Please enter your Mobile number.</span></p>')
        .effect("shake", { times:3 }, 20); console.log("mobile");
        hasError = true;
    }

    //chk mobile have value but not email
    //OR logic 1-0 
    else if(!mobileReg.test(mobileval) && emailaddressVal == '') {
        $("#mobile").after('<p><span class="error blurry">Enter currect Mobile number.</span></p>')
        .effect("shake", { times:3 }, 20);console.log("currect mobile");
         hasError = true;
    }
    //chk mobile dont hv the value but email have
    //OR logic 0-1 
    if(!emailReg.test(emailaddressVal) && mobileval == '') {
        $("#UserEmail").after('<p><span class="error blurry">Enter a valid email address.</span></p>')
        .effect("shake", { times:3 }, 20); console.log("valid email");

        hasError = true;


    }
    //chk the input mobile & email have value
    //OR logic 1-1 
    else        
    if(!emailReg.test(emailaddressVal) &&!mobileReg.test(mobileval)) {
        $("#UserEmail").after('<p><span class="error blurry">Enter a valid email address.</span></p>')
        .effect("shake", { times:3 }, 20); console.log("valid email combination");

        $("#mobile").after('<p><span class="error blurry">Enter currect Mobile number.</span></p>')
        .effect("shake", { times:3 }, 20);console.log("currect mobile combination");

        hasError = true;


    }

Respondido 05 Jul 12, 06:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.