Javascript Form Validation (multiple conditions)

Question

My form currently checks two email fields to make sure they match. I would also like it to make sure neither of the two email fields are empty AND a checkbox has been checked off. I've been scouring for examples and nothing seems to do the trick.

Any help would be greatly appreciated.

<form action="" method="post" name="submission" onsubmit="return checkEmail(this);">    
        <label for="email">Email</label>        
        <input id="email" maxlength="55" name="email" type="text" value="<?=htmlspecialchars($_POST["email"]) ?>" /><br/>   
        <label for="emailconfirm">Confirm email address</label>     
        <input id="emailconfirm" maxlength="55" name="emailconfirm" type="text" value="<?=htmlspecialchars($_POST["emailconfirm"]) ?>" /><br/>      
        <label for="checksign">By completing this form, you agree to the terms and conditions above. If you do not agree to these terms, your application will not be considered.</label>
        <input class="check" id="checksign" name="checksign[]" type="checkbox" value="Yes" /> 
</form>

<script type="text/javascript" language="JavaScript">
function checkEmail(theForm) {
    if (theForm.email.value != theForm.emailconfirm.value)
    {
        alert('E-mail addresses do not match.');
        return false;
    } else {
        return true;
    }    
}
</script>

Wild Beard · Accepted Answer · 2015-02-05 21:14:26Z

Rather than adding onto the checkEmail() function I suggest changing it to an entire form function. Example

function validateForm() {
 
    var email = document.getElementById('email');
    var c_email = document.getElementById('emailconfirm');
    var check = document.getElementById('checksign');
    var error = '';
    
    if ( email.value != c_email.value ) {
        error = "The provided emails do not match!";
        alert(error);
        return false;
    } else if ( email.value.length == 0 || c_email.value.length == 0 ) {
        error = "One of more of the emails provided are empty.";
        alert(error);
        return false;
    } else if ( !check.checked ) {
        error = "Please accept our terms.";
        alert(error);
        return false;
    }
    
}

<form action="" method="post" name="submission" onsubmit="return validateForm();">
  <!-- controls.. -->
</form

While this does work it does not check for valid emails, that they didn't just put in one or two spaces, etc. in the email inputs. That would require checking their inputs against some regex.

atrifan · Accepted Answer · 2015-02-05 21:16:01Z

1

check that the both text fields have text:

var regex = /\S+@\S+\.\S+/;
(typeof theForm.email.value !== 'undefined' && 
 typeof  theForm.emailconfirm.value !== undefined &&
 theForm.email.value.length > 1 && 
 theForm.emailconfirm.value.length > 1 && 
 regex.test(theForm.email.value)
 )

answered Feb 5, 2015 at 21:16

atrifan

1725 bronze badges

Comments

user1789573 · Accepted Answer · 2015-02-05 21:26:06Z

0

If you were using AngularJS you could create a variable and set it equal to ng-model="[your variable here]" .
For example the code might look like the following:

                                     <input type="checkbox"
                                       ng-model="$scope.emailConfirm"/>

You can then made a Javascript Controller that will evaluate the model for a boolean. Use a conditional (i.e. if($scope.emailConfirm)//then do some logic) to evaluate said boolean and write your logic in THAT block of code.

answered Feb 5, 2015 at 21:26

user1789573

5352 gold badges8 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript Form Validation (multiple conditions)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related