Validating a form in Javascript not working

Question

I'm trying to validate a form using JavaScript, but the code doesn't seem to execute. The Form is being processed using php which is working just fine. But, the validation is not working. Can someone please help me with this.

<script>
    function validateForm(){
    var x = document.getElementById('name');
    var email = document.getElementById('email');
    var num = document.getElementById('number');
    var size = document.getElementById('size');
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var atpos=email.value.indexOf("@"); 
    var dotpos=email.value.lastIndexOf(".");

    if (x.value == null || x.value == "") {
    alert("Please Enter your name");
    x.foucs;
    x.style.background = 'Yellow';
    return false;
    }
    if(!filter.test(email.value){
    alert('Please provide a valid email address');
    email.focus;
    email.value="";
    return false;
    }
    if(num.value == null && num.value == ""){
    alert('Please enter your mobile number');
    num.focus();
    }
    if(!isNan(num.value){
    alert('Please enter a valid number');
    num.focus();
    num.style.background();
    return false;
    }
    return false;


}
</script>

And here is my html code.

      <form method="post" name="myForm " onsubmit="return validateForm()" action="myprocessingscript.php" >                                         
                                                <input type="text" name="name"  placeholder="Name" class="text" id="name" />
                                                                                                <input name="email" placeholder="Email" type="text"   class="text" id="email"/>

<input name="number" placeholder="Mobile Number" type="text"  class="text"  id="number"/>

<input name="size"  placeholder="Size" type="text" class="text" id="size"  />
                                                                                        <input type="Submit" value="Submit" class="button">

Please elaborate does not work. Do you get an error, do you get invalid validation? — Halcyon
– Halcyon, Commented Oct 4, 2013 at 16:00
What's actually happening? Is it submitting the form to the PHP without executing the Javascript? Are there any script errors? — Jonathon
– Jonathon, Commented Oct 4, 2013 at 16:00
@JonathonHenderson Yes! It is submitting the form to the PHP without executing the Javascript code. — Sharjeel Siddique
– Sharjeel Siddique, Commented Oct 4, 2013 at 16:02
I recommend using a jQuery form validation plugin. It's much more simpler. — iCode
– iCode, Commented Oct 4, 2013 at 16:04
That would imply that you have asyntax error somewhere and your function isn't being recognised because of it. — Jonathon
– Jonathon, Commented Oct 4, 2013 at 16:11

MrCode · Accepted Answer · 2013-10-04 16:31:27Z

1

Working fiddle

Correct the spelling of foucs and ensure all references have parenthesis such as:

email.focus();

Without parenthesis, the function is not called. It's valid Javascript but it won't do anything.

You also missed a closing ) here:

if(!filter.test(email.value){
//                         ^ add another )

and here:

if(!isNan(num.value){
//                 ^ add another )

!isNan(....) should be isNaN(....). Javascript is case sensitive and you shouldn't be "notting" it here. isNaN is saying "is not a number" so it's already "notted".

On the line below, style has no background function. Looks like you want to assign a value here not call a function:

num.style.background(); // change to assign value.

On this line, change && to ||:

if(num.value == null && num.value == ""){
//                   ^ should be ||

Finally, remove the return false at the end.

edited Oct 4, 2013 at 16:31

answered Oct 4, 2013 at 16:12

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

3 Comments

Sharjeel Siddique Over a year ago

Thanks a lot for helping me out with this. The name and email are being validated perfectly. But the number isn't. It is not checking if the user input is number or not. Can you please help me on this. I even replaced isNan with isNan. But still it's not working.

Sharjeel Siddique Over a year ago

The condition if(!isNaN(num.value)) is not being checked. It is accepting alphabets also. Any suggestions?

MrCode Over a year ago

Are you testing the updated fiddle? It works for me in Chrome....... doesn't accept alphabets or blank, only numbers.

Joshua Dwire · Accepted Answer · 2013-10-04 16:26:03Z

1

Try using x.focus();

x.foucs; is not a valid statement, and neither is email.focus;.

edited Oct 4, 2013 at 16:26

Joshua Dwire

5,4515 gold badges32 silver badges51 bronze badges

answered Oct 4, 2013 at 16:06

Amit Singh

2,2754 gold badges27 silver badges50 bronze badges

Comments

Jonathon · Accepted Answer · 2013-10-04 16:13:38Z

These aren't right I don't think:

email.focus;
// Try email.focus();

and

x.foucs;
// Try x.focus();

Also looking at your code I don't see a </form>

Try this:

function validateForm(){
    var x = document.getElementById('name');
    var email = document.getElementById('email');
    var num = document.getElementById('number');
    var size = document.getElementById('size');
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var atpos = email.value.indexOf("@"); 
    var dotpos = email.value.lastIndexOf(".");

    if (x.value == null || x.value == "") {
        alert("Please Enter your name");
        x.focus();
        x.style.background = 'Yellow';
        return false;
    }
    if(!filter.test(email.value){
        alert('Please provide a valid email address');
        email.focus();
        email.value="";
        return false;
    }
    if(num.value == null || num.value == ""){
        alert('Please enter your mobile number');
        num.focus();
        return false;
    }
    if(!isNaN(num.value)){
        alert('Please enter a valid number');
        num.focus();
        num.style.background = "Yellow";
        return false;
    }

    return true;


}

Collectives™ on Stack Overflow

Validating a form in Javascript not working

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related