CODEWITHSUNDEEP
javascripthtml
Rai Abdullah
Rai Abdullah

Reputation: 17

form validation error

I have little problem with form and I am using js for validation.

Here is my form code.

<form method="get" onkeydown="checkEnter()" action="emailform.php" id="signupform" name="subscribe">
  <input name="email" id="email" type="text" value="Enter Email for Updates" onfocus="if(this.value=='Enter Email for Updates'){this.value=''};" />
  <input type="hidden" name="submitted" id="submitted" value="true" />
</form>

id signupform I am using for validation and submit the form is on pressing enter button.

But there is problem when put signupform then my validation start working fine and when I enter correct email it's show me error and when I remove the signupform id then my form submission work fine without validation.

Here is my JS code for id signupform.

function SubscribeForm() {
  $('#signupform').submit(function () {
    $('.email').removeClass('error')
    $('em.error').remove();

    var error = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if ($.trim($('.email').val()) == '') {
      $(this).append('<em class="error">Please enter your email address.</em>');
      $(this).addClass('error');
      error = true;
    } else if (!emailReg.test(jQuery.trim($('.email').val()))) {
      $(this).append('<em class="error">Please enter a valid email address</em>');
      $(this).addClass('error');
      error = true;
    }
    if (!error) {
      $("#submit", this).after('<span id="form_loading"></span>');
      var formValues = $(this).serialize();

      $.post($(this).attr('action'), formValues, function (data) {
        $("#signupform").before(data);
      });

      $(':input[type="text"]').attr('value', '');
    }
    return false
  });
}

Upvotes: 1

Views: 99

Answers (4)

Rai Abdullah
Rai Abdullah

Reputation: 17

Thanks for your help Guys. i just put this and now working fine. 

$('#signupform').submit(function(){
        $('.email').removeClass('error')
        $('em.error').remove();
        var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        sEmail = document.getElementById('email').value;
        if (filter.test(sEmail)) {

            return true;
        }
        else {
            if(sEmail == '')
            {
                $(this).append('<em class="error">Please enter your email address</em>');
                $(this).addClass('error');
            }
            else
            {
                $(this).append('<em class="error">Please enter a valid email address</em>');
                $(this).addClass('error');
            }
            return false;
        }
    });
});

Upvotes: 0

Zlatko
Zlatko

Reputation: 19569

Also a possible solution, if you don't need to support the old browser: placeholder.

<input placeholder="Enter email" type="text"... />

Upvotes: 0

amit gaikwad
amit gaikwad

Reputation: 41

change

return false;

to

return !error;

Also, add css class "email" to input email field, or change jquery to selector code ".email" to "#email"

Upvotes: 1

Yogesh Suthar
Yogesh Suthar

Reputation: 30488

change 

return false

to 

return error;

it is causing problem.

Upvotes: 1

Related Questions