why isn't this javascript validation working?

Question

I have the following html code

<form style="font-size:20px;border: 1px solid #666;font-face:'times new roman';">

        test <sub>TM</sub>
            <TABLE>

                <tr><td>Name</td><td><input type="text"name="name" id="num1"/></td></tr>

                <tr><td>E-mail id</td><td><input type="text" name="E-mail id" id="email" placeholder="abc@efg.com"/></td></tr>

                <tr><td><p>Address</p></td>
                    <div>

                        <td><textarea name="address" rows="5" cols="10" id="num3"></textarea>
                    </div>
                </tr>

                <tr><td>location</td><td><select name="location"><br>
                        <option value="kerala">kerala</option>
                        <option value="tamil nadu">tamil nadu</option></td></tr>
                        </select><br>
                <tr><td>Gender</td><td><input type="radio"name="gender" value="male">male</td></tr> <br>
                <tr><td></td><td><input type="radio"name="gender" value="female">female</td></tr><br>


                <tr><td><input type="checkbox"name="agree" value="I agree with the above information">I agree with the above information<br>
                <input type="button" value="LOGIN" onclick="letters()"/></td></tr>
            </table>
        </form>

and also the the following javascript

<script type="text/javascript">
function letters() 
{
   var emailText = document.getElementById('email').value;
    //alert(emailText);
    var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
    var x=document.getElementById("num1").value;
                //alert(x);
     var letters = /^[a-zA-Z]+$/ ;  

   if (pattern.test(emailText)==true && x.test(letters)==true) 
        {
                    alert("ok");
                    return true;
         }
    else
        {
                      alert("not ok");
                    return false;
        }
}
</script>

what this script does is, on button click it will call the function letters() and validates the input fields against E-mail and alphabet regex.

But why isn't this working?

I am new to javascript and html,infact I'm learning it.So please help.

Answer 1

Can you please check your problem may be here:

<input type="text" name="E-mail id" id="email" placeholder="abc@efg.com" id="num2">

Two times id define in above field in your code.

Hope this help

Answer 2

remove onclick() function from submit button

put thisinstead of your form's 1st line

<form style="font-size:20px;border: 1px solid #666;font-face:'times new roman';" onsubmit="return letters()">

also delete 2nd ID in your e-mail field

<input type="text" name="E-mail id" id="email" placeholder="abc@efg.com" **id="num2"**>

Answer 3

Change your following code

if (pattern.test(emailText)==true && x.test(letters)==true) 

TO

if (pattern.test(emailText)==true && letters.test(x)==true) 

Check this fiddle