CODEWITHSUNDEEP
javascriptphpforms
batuman
batuman

Reputation: 7304

Validation with JavaScript

There are similar questions, but I can't find the way I want to check the form submit data.

I like to check the form submit data for phone number and email. I check as follows, but it doesn't work.

How can I make it correct?

<script>
    function validateForm() {

        var x = document.forms["registerForm"]["Email"].value;
        if (x == null || x == "") {
            alert("Email number must be filled out.");
            return false;
        }
        else if(!/@./.test(x)) {
            alert("Email number must be in correct format.");
            return false;
        }

        x = document.forms["registerForm"]["Phone"].value;
        if (x == null || x == "" ) {
            alert("Phone number must be filled out.");
            return false;
        }
        else if(!/[0-9]+()-/.test(x)) {
          alert("Phone number must be in correct format.");
          return false;
        }
    }
</script>

For email I'd like to check only "@" and "." are included in the email address.

For phone number, I'd like to check ()-+[0-9] and one space are only accepted for phone number, for example +95 9023222, +95-1-09098098, (95) 902321. How can I check it?

There will be another check at the server, so there isn't any need to check in detail at form submit.

Upvotes: 1

Views: 250

Answers (4)

Jayanti Lal
Jayanti Lal

Reputation: 1185

HTML5 has an email validation facility. You can check if you are using HTML5:

<form>
    <input type="email" placeholder="[email protected]">
    <input type="submit">
</form>

Also, for another option, you can check this example.

Upvotes: 0

R. Oosterholt
R. Oosterholt

Reputation: 8080

You could of course write the validation part yourself, but you could also use one of the many validation libraries.

One widely used one is Parsley. It's very easy to use. Just include the .js and .css and add some information to the form and its elements like this (fiddle):

<script src="jquery.js"></script>
<script src="parsley.min.js"></script> 
<form data-parsley-validate>
    <input data-parsley-type="email" name="email"/>
</form>

Upvotes: 1

momouu
momouu

Reputation: 711

Email validation

From http://www.w3resource.com/javascript/form/email-validation.php

function ValidateEmail(mail)
{
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
    {
        return (true)
    }

    alert("You have entered an invalid email address!")
    return (false)
}

Phone number validation

From http://www.w3resource.com/javascript/form/phone-no-validation.php.

function phonenumber(inputtxt)
{
    var phoneno = /^\d{10}$/;
    if ((inputtxt.value.match(phoneno))
    {
        return true;
    }
    else
    {
        alert("message");
        return false;
    }
}

Upvotes: 3

Niranjan N Raju
Niranjan N Raju

Reputation: 11987

You can do something like this:

HTML part

<div class="form_box">
    <div class="input_box">
        <input maxlength="64" type="text" placeholder="Email*" name="email" id="email" />
        <div id="email-error" class="error-box"></div>
    </div>
    <div class="clear"></div>
</div>

<div class="form_box">
    <div class="input_box ">
        <input maxlength="10" type="text" placeholder="Phone*" name="phone" id="phone" />
        <div id="phone-error" class="error-box"></div>
    </div>
    <div class="clear"></div>
</div>

Your script

var email = $('#email').val();
var phone = $('#phone').val();
var email_re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,3}))$/;
var mobile_re = /^[0-9]{10}$/g;

if ($.trim(email) == '') {
    $('#email').val('');
    $('#email-error').css('display', 'block');
    $('#email-error').html('Please enter your Email');
} else if (!email.match(email_re)) {
    $('#email-error').css('display', 'block');
    $('#email-error').html('Please enter valid Email');
}

if ($.trim(phone) == '') {
    $('#phone').val('');
    $('#phone-error').css('display', 'block');
    $('#phone-error').html('Please enter your Phone Number');
} else if (!phone.match(mobile_re)) {
    $('#phone-error').css('display', 'block');
    $('#phone-error').html('Please enter valid Phone Number');
} else {
    $('#phone-error').css('display', 'none');
    $('#phone-error').html('');
}

Upvotes: 2

Related Questions