Email validation for specific domain name

Question

I have the following form. I want to validate the email field .it should only contain for domain name " @somename.com " when the user clicks submit.

The mail should only be validated when the check box is clicked to show the email field.

If the email is invalid i want to prevent submission

<form class="form-horizontal" id="rForm" data-toggle="validator" role="form">

                        <div class="form-group">
                            <div class="col-xs-offset-3 col-xs-8">
                                <label class="checkbox-inline col-xs-10">
                                    <input type="checkbox" ID="chkbx"> Email 
                                </label>
                            </div>

                        </div>
                        <div class="form-group email">
                            <div class="col-xs-offset-3 col-xs-8">

                                <div class="col-xs-8">
                                    <input type="text" class="form-control "  placeholder="Enter email">
                                </div>
                            </div>
                        </div>

                                <div class="form-group">
                            <div class="col-xs-offset-3 col-xs-8">
                                <input type="reset" class="btn btn-default" id="rset" value="Reset">
                                <input type="submit" class="btn btn-primary" id="submit" value="Submit">
                            </div>
                        </div>
                    </form> 

JS

 $("#submit").on('keypress click', function(e){
            e.preventDefault();
$('#chkbx').hide();
$('#chkbx').click(function () {
       // This will show / hide your element accordingly
       $('.email').toggle();
});


    });

Answer 1

Checkout JavaScript RegEx to determine the email's domain (yahoo.com for example) . You can use that and augment your example:

 $('#chkbx').click(function() { // This will show / hide your element accordingly $('.email').toggle(); }); $("#submit").on('click', function(e) { e.preventDefault(); if ($('#chkbx').is(':checked')) { // https://stackoverflow.com/questions/3270185/javascript-regex-to-determine-the-emails-domain-yahoo-com-for-example console.log(/@testdomain.com\\s*$/.test($('#email_input').val())); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form-horizontal" id="rForm" data-toggle="validator" role="form"> <div class="form-group"> <div class="col-xs-offset-3 col-xs-8"> <label class="checkbox-inline col-xs-10"> <input type="checkbox" ID="chkbx" checked>Email </label> </div> </div> <div class="form-group email"> <div class="col-xs-offset-3 col-xs-8"> <div class="col-xs-8"> <input id="email_input" type="text" class="form-control " placeholder="Enter email"> </div> </div> </div> <div class="form-group"> <div class="col-xs-offset-3 col-xs-8"> <input type="reset" class="btn btn-default" id="rset" value="Reset"> <input type="submit" class="btn btn-primary" id="submit" value="Submit"> </div> </div> </form> 

Answer 2

Use the following function to test for your email. EDIT:

You first need to add a name= and id= to your email input field.... So what you want to do is:

<input type="text" class="form-control " placeholder="Enter email" name="email" id="email">

and then do:

function testEmail(string) {
    var regex = /.+@somename.com$/i;
    return regex.test(string);
}

//testEmail("nope@test.com"); // false
//testEmail("what@somename.com.other"); //false
//testEmail("yeah@somename.com"); //true
//testEmail("@somename.com"); // false

$('form').submit(function(e){
    var values = $('form').serialize();
    if(!testEmail(values.email)) 
        e.preventDefault();
    // your submission code goes here.
})