Validation with JavaScript

Question

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.

Use html 5 validation using pattern attribute like <input id="phone" placeholder="888-888-8888" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> — Rutunj sheladiya
– Rutunj sheladiya, Commented Dec 8, 2015 at 6:31

Peter Mortensen · Accepted Answer · 2020-08-18 12:52:41Z

3

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;
    }
}

edited Aug 18, 2020 at 12:52

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 8, 2015 at 6:32

momouu

7114 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Mortensen · Accepted Answer · 2020-08-18 12:50:55Z

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('');
}

Peter Mortensen · Accepted Answer · 2020-08-18 12:54:22Z

1

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>

edited Aug 18, 2020 at 12:54

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 8, 2015 at 6:52

R. Oosterholt

8,2003 gold badges56 silver badges80 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2020-08-18 12:57:47Z

0

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.

edited Aug 18, 2020 at 12:57

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 8, 2015 at 6:31

Jayanti Lal

1,1836 silver badges19 bronze badges

Collectives™ on Stack Overflow

Validation with JavaScript

4 Answers 4

Email validation

Phone number validation

Comments

HTML part

Your script

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Email validation

Phone number validation

Comments

HTML part

Your script

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related