Jquery validation not working on php form action

Question

I am working on jquery validation with form action php submit. I created jquery validation using click function first time it's validate the input field on second click it's redirecting to form action url. How to prevent this using client side validation. How can i solve this.

<form action="test.php" method="post">
        <input class="qemail" name="your-email-address" placeholder="Your email address" value="" type="text">
        <textarea class="qmessage" name="your-enquiry" rows="8" placeholder="Your message"></textarea>
        <input id="submit_sf" name="enquiry-submit" value="SUBMIT" type="submit">
    </form>

$(document).ready(function(){
            $('input[name="enquiry-submit"]').click(function(){
                var email = $('.qemail').val();
                var msg = $('.qmessage').val();

                var email_regex = /^(([^<>()\[\]\\.,;:\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(!email.match(email_regex) || email.length == 0 ){

                if ($('.qemail').prev(".rvalidation").length == 0){     
                  $('.qemail').before('<p class="rvalidation" style="position:relative; color: #000; font-size:12px;">Please enter a valid Details *</p>');
                  $(".qemail").focus();      
                    console.log("email field is empty");
                    $(".qemail").focus();
                   //console.log("validate1"); \
                  return false;
                } 
                    //return false;
                }
                if(msg.length == 0){
                    console.log("message field is empty");
                    return false;
                }
            });


        });

Intekhab Khan · Accepted Answer · 2018-04-30 18:25:38Z

1

change type = "button"

<button id="submit_sf" name="enquiry-submit" value="SUBMIT" type="button">Submit</button>

answered Apr 30, 2018 at 18:25

Intekhab Khan

1,8734 gold badges19 silver badges29 bronze badges

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

Comments

Bret Lipscomb · Accepted Answer · 2018-04-30 18:26:07Z

0

The function() within the .click event can accept an argument for the event handler.

$('input[name="enquiry-submit"]').click(function(ev) { ...

You can use ev.preventDefault(); to keep the post from actually occurring until validation has passed. You'll need to manually trigger the form post though.

$('input[name="enquiry-submit"]').click(function(ev) {
  ev.preventDefault();
...
}

answered Apr 30, 2018 at 18:26

Bret Lipscomb

4992 silver badges7 bronze badges

4 Comments

muraliniceguy97 Over a year ago

It's not redirecting validation success.

Bret Lipscomb Over a year ago

You'll need to trigger the form post manually when validation has passed: Something like: $(form).submit();

muraliniceguy97 Over a year ago

not working "$('.qfvalidate').submit();" it's stopping on if(msg.length == 0){} condition

Bret Lipscomb Over a year ago

What is .qfvalidate ? Did you add that class to your <form>? Can you post your updated code?

Collectives™ on Stack Overflow

Jquery validation not working on php form action

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related