CODEWITHSUNDEEP
javascripthtmlforms
Nathan S
Nathan S

Reputation: 283

Javascript Form Validation (multiple conditions)

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>

Upvotes: 0

Views: 4060

Answers (3)

user1789573
user1789573

Reputation: 535

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.

Upvotes: 0

atrifan
atrifan

Reputation: 172

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

Upvotes: 1

Wild Beard
Wild Beard

Reputation: 2927

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.

Upvotes: 1

Related Questions