jQuery Check user's input before form submission

Question

I'm trying to validate user's input before they submit the form. Although I'm successful doing so when they hit the button, somehow I couldn't make it also stop when they press the enter key:

HTML:

   <form method='post' class='submit_form' action="<?php echo base_url();?>interview/reserve_temporary">
        <input type="text" class="form-control email_input" id="reserve_email_2" placeholder="Email">
        <button type="button" id="subscribe_2" class="btn btn-default text-center foot-submit-btn subscribe_button">Let me try</button>
   </form>

JS:

  $('.submit_form').submit(function(e) { 

      var email = $(this).find('.email_input').val();
      var id=$(this).find('.subscribe_button').attr('id').split("_").pop(); 

      var regex_email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      if (regex_email.test(email)||email.match(/^\d+$/)) {
          $(this).text('Sending……');
      }
      else {
          return false;
      }
 }

What you want to validate? Check if user press the submit button with empty string? — jhyap
– jhyap, Commented Jun 10, 2014 at 0:43

Lawrence Johnson · Accepted Answer · 2014-06-10 00:57:17Z

2

Give this a shot:

$('.submit_form').submit(function(e) { 

    var email = $(this).find('.email_input').val();
    var id=$(this).find('.subscribe_button').attr('id').split("_").pop(); 

    var regex_email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (regex_email.test(email)||email.match(/^\d+$/)) {
        $(this).text('Sending……');
        return true
    }
    else {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    }
}

edited Jun 10, 2014 at 0:57

answered Jun 10, 2014 at 0:37

Lawrence Johnson

4,0952 gold badges20 silver badges30 bronze badges

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

4 Comments

user3192948 Over a year ago

Thanks Lawrence. I updated the question by deleting the unnecessary messy parts which somehow escaped my previous inspection. I also tried your code, but it just submits straight away without validating anything.

Lawrence Johnson Over a year ago

Well, that's not too surprising. I find this approach to be pretty inconsistent, but I've posted an alternative approach that is based upon preventing the default event if your validation fails. Give it another go.

Lawrence Johnson Over a year ago

Well, can I ask what expression you are using to test? There is another approach that is not fun, but have you at least checked to see that the function is being called? It might be helpful at this point to set up a jsfiddle

user3192948 Over a year ago

I got it worked eventually. The if conditions are not being met which caused the avalanche of troubles. I changed the condition to if (0<1) and the function is running. I will need to work on that part later. But thanks again for the help! Super helpful.

Mohamed Amin · Accepted Answer · 2014-06-10 00:33:11Z

0

you can use a more easy option to validate your inputs check jquery validation engine ,an easy&powerful validation tool https://github.com/posabsolute/jQuery-Validation-Engine

answered Jun 10, 2014 at 0:33

Mohamed Amin

1,0672 gold badges15 silver badges33 bronze badges

1 Comment

user3192948 Over a year ago

Thank you. I would prefer stay on JS and JQuery though.

Collectives™ on Stack Overflow

jQuery Check user's input before form submission

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related