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">

Answer 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.

Answer 2

Try using x.focus();

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

Answer 3

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;


}