6

I am using bootstrap in my web page and trying to make a form on that page. I've used the standard classes of bootstrap for making the form. I've already used the validation to check the emptiness of the form. I just want to add the email and phone number validation further in my code. The code for the form and the and the already declared validation script is given below:

<script type="text/javascript">
function validateText(id) {
    if ($("#" + id).val() == null || $("#" + id).val() == "") {
        var div = $("#" + id).closest("div");
        div.removeClass("has-success");
        $("#glypcn" + id).remove();
        div.addClass("has-error has-feedback");
        div.append('<span id="glypcn' + id
           + '" class="glyphicon glyphicon-remove form-control-feedback"></span>');
        return false;
    } else {
        var div = $("#" + id).closest("div");
        div.removeClass("has-error");
        $("#glypcn" + id).remove();
        div.addClass("has-success has-feedback");
        div.append('<span id="glypcn' + id
               + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
        return true;
    }
}

$(document).ready(function() {
    $("#contactButton").click(function() {
        if (!validateText("contactName")) {
            return false;
        }
        if (!validateText("contactEmail")) {
            return false;
        }
        if (!validateText("contactMobile")) {
            return false;
        }
        if (!validateText("contactAddress1")) {
            return false;
        }
        if (!validateText("contactCity")) {
            return false;
        }
        $("form#contactForm").submit();
    }
);
});
<form class="form-horizontal" id="contactForm">
<div class="form-group">
    <label for="contactName" class="col-sm-2 control-label">Name<sup>*</sup></label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="contactName">
    </div>
</div>
<div class="form-group">
    <label for="contactEmail" class="col-sm-2 control-label">Email<sup>*</sup></label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="contactEmail">
    </div>
</div>
<div class="form-group">
    <label for="contactMobile" class="col-sm-2 control-label">Mobile
        Number<sup>*</sup>
    </label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="contactMobile">
    </div>  
</div>
<div class="form-group">
    <label for="contactAddress1" class="col-sm-2 control-label">Address1<sup>*</sup></label>
    <div class="col-sm-10">
        <textarea class="form-control" rows="5" id="contactAddress1"></textarea>
    </div>  
</div>
<div class="form-group">
    <label for="contactAddress2" class="col-sm-2 control-label">Address2</label>
    <div class="col-sm-10">
        <textarea class="form-control" rows="5" id="contactAddress2"></textarea>
    </div>  
</div>
<div class="form-group">
    <label for="contactCity" class="col-sm-2 control-label">City<sup>*</sup></label>
    <div class="col-sm-10">
        <select class="form-control" id="contactCity">
            <option>KURUKSHETRA</option>
            <option>PEHOWA</option>
            <option>KARNAL</option>
        </select>   
    </div>  
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
    <p>     
        <span id="helpBlock" class="help-block"><sup>*</sup> marked fields
            are compulsory!</span>
    </p>    
</div>
<div class="checkbox">
    <label> <input type="checkbox"> I agree to the <a href="#">Terms of
            Service</a>     
    </label>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
    <center>
        <p>
            <button type="button" class="btn btn-primary btn-lg btn-block"
                id="contactButton">
                Submit <span class="glyphicon glyphicon-arrow-right"> </span>
            </button>
        </p>
    </center>
</div>
</form>
David Newcomb
  • 10,639
  • 3
  • 49
  • 62
Atul Mittal
  • 111
  • 1
  • 4
  • 15
  • 2
    you can use regular expression object RegExp in javascript and use method test() to check email or phone no. is valid or not – Virendra Yadav Aug 10 '15 at 10:41

2 Answers2

8

You should use a regex like mentioned in the comment. The regex is also mentioned here.

var email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;

Here is a working example.

Community
  • 1
  • 1
bloC
  • 526
  • 3
  • 16
  • Thanks for your genuine solution. Please do guide me about the validation of mobile number too as i am bit low in javascript thing. – Atul Mittal Aug 11 '15 at 01:34
  • 2
    No problem. The validation of mobile numbers depends on the format you want to accept. Here is a post that is dealing with this validation http://stackoverflow.com/questions/18375929/validate-phone-number-using-javascript Basically it's the same thing with another regex. As seen in this post http://stackoverflow.com/questions/12857979/regex-for-mobile-number-with-or-without-country-code this is the regex for mobile numbers: ^([0|\+[0-9]{1,5})?([7-9][0-9]{9})$ I hope this helps you. – bloC Aug 11 '15 at 05:51
  • Futher please tell me how can i disable the submit till the checkbox given in the program given above is pressed. – Atul Mittal Aug 12 '15 at 01:42
  • 2
    This is another question and might help other users too. so please create a new question for this and reference to this one. I'll help you as soon as I see the question (you can also mention me in a comment, so I get a message) – bloC Aug 12 '15 at 05:01
  • I have reached the maximum limit of asking the questions on stackoverflow. It will be beneficial for me if you provide me the link or whatever possible from your side. – Atul Mittal Aug 12 '15 at 08:59
  • The above pattern does not validate correct email addresses as specified in RFC5322 and is misleading. If you use this on a live website you will block valid users. special characters are allows in the local part of the address !#$%&'*+-/=?^_`{|}~ please see https://stackoverflow.com/questions/2049502/what-characters-are-allowed-in-an-email-address and https://tools.ietf.org/html/rfc5322 – nick fox Aug 31 '18 at 17:08
  • `+` is a valid character in emails. – user2924019 Sep 23 '19 at 20:44
4

you have to require additional plugin for this. Try this:

<form id="emailForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-7">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#emailForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                validators: {
                    emailAddress: {
                        message: 'The value is not a valid email address'
                    }
                }
            }
        }
    });
});
</script>
  • This isn't a out-of-the-box method... it requires a third party plugin... obviously Atul isn't using an extra plugin – bloC Aug 10 '15 at 11:18
  • mmh ok.... so you are absolutely sure, that you don't use this one here? http://formvalidation.io/examples/using-mailgun-api-validate-email-address/ – bloC Aug 10 '15 at 11:44
  • This isn't working - there is no function formValidation() declared. – Hexodus Feb 13 '16 at 12:13