CODEWITHSUNDEEP
javascriptjqueryhtml
Pranav Kaistha
Pranav Kaistha

Reputation: 295

HTML Form validates on Chrome but not on Firefox and IE

Hi I am trying to do simple validation on a form. The form validates on chrome but not on Mozilla Firefox and Internet Explorer.

Comment Form HTML

<form method="post">
<table class="table-form">
    <tr>
        <td><label for="comment_name">Name<span class="orange">*</span></label></td>
        <td><input type="text" name="name" placeholder="Your full name" id="comment_name"><span class="orange"></span></td>
    </tr>
    <tr>
        <td><label for="comment_email">Email (Optional)</label></td>
        <td><input type="email" name="email" placeholder="[email protected]" id="comment_email"/><span class="orange"></span></td>
    </tr>
    <tr>
        <td><label for="comment_country">Country (Optional)</label></td>
        <td><input type="text" name="country" placeholder="eg. India" id="comment_country"/><span class="orange"></span></td>
    </tr>
    <tr>
        <td><b>Comment <span class="orange">*</span></b></td>
        <td><textarea textarea id="comment_text_area" name="comment" placeholder="Write your comment here."></textarea><span class="orange"></span></td>
    </tr>
</table>
<input type="button" id="submit-comment" value="Sumbit"/>

</form>

Script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('#submit-comment').click(function(){

    $('#comment_name').next().html('');
    $('#comment_email').next().html('');
    $('#comment_text_area').next().html('');

    var comment_name=$('#comment_name').val();
    var comment_email=$('#comment_email').val();
    var comment_country=$('#comment_country').val();
    var comment_text_area=$('#comment_text_area').val();

    var characterReg = /^\s*[a-zA-Z,\s]+\s*$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if(!characterReg.test(comment_name)||name=='') {
      $('#comment_name').next().html('Invalid Name');
    } else if(!emailReg.test(comment_email)) {
      $('#comment_email').next().html('Invalid Email Format.');
    } else if(comment_text_area=='') {
      $('#comment_text_area').next().html('Please enter a comment.');
    } else {
      alert('Validated!');
    }
  });   
});
</script>

I see the validation error message 'Invalid Name' on Internet Explorer and Mozilla Firefox. The code shows the Alert 'Validated!' on Goggle Chrome. Someone please tell me where I am going wrong. I am using the latest versions of all browsers.

Upvotes: 1

Views: 73

Answers (1)

Sai G
Sai G

Reputation: 146

You might have to try removing this condition (name=='') from 

if(!characterReg.test(comment_name)||name=='') {
 $('#comment_name').next().html('Invalid Name');
}

to something like this

if(!characterReg.test(comment_name)) {
 $('#comment_name').next().html('Invalid Name');
}

variable name is returned as empty in static web page, where as in codepen(CodePen)/jsfiddle(result) we get some value

Upvotes: 2

Related Questions