How to submit form if validate using jquery?

Question

I am validating form with jquery. So when form submit i am using event.preventDefault(); after validate form , form will be submit to respective action page.But in my case it doesn't work.

Code what i did-

$('form[name=contact_form]').submit(function(event) {
        event.preventDefault();
        var formData = $('form[name=contact_form]').serialize();
        var phone = $.trim($('form[name=contact_form]').find('input[name=PHONE]').val()).length;
        var intRegex = /[0-9 -()+]+$/;
        var alert = $('#contact_alert');
        var success = $('#contact_success');
        if(phone==0){
            phone.focus();
            alert.html("<p class='alert alert-danger' style='text-align:left;'>Phone number is required</p>");
        }
        else if((phone < 10)){
            phone.focus();
             alert.html("<p class='alert alert-danger' style='text-align:left;'>Please enter a valid phone number</p>");
             return false;
        }else{
            return true;
        }
    });

Html Page :

<?php
echo form_open_multipart('home/inquiry', array('name' => 'contact_form'));
?>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="hidden" name="form_type" value="C">
                            <input type="text" name="NAME" id="user-name" class="form-control" placeholder="Full Name"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" name="PHONE" id="user-phone" class="form-control" placeholder="Phone"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" name="EMAIL" id="user-email" class="form-control" placeholder="Email"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" name="SUBJECT" id="user-subject" class="form-control" placeholder="Reason for inquiry"/>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <textarea class="form-control" name="MESSAGE" id="user-message"  placeholder="Message"></textarea>
                    </div>
                    <div class="col-md-12 text-left">
                        <div class="form-group">
                            <input type="submit" name="submit"  class="btn btn-warning">
                        </div>
                    </div>
                </div>
                <?php echo form_close(); ?>

ahwayakchih · Accepted Answer · 2016-05-23 13:50:58Z

3

Do not call event.preventDefault(); if you want the form to be submitted after it validates ok.

Returning false after failed validation is enough.

edited May 23, 2016 at 13:50

answered May 23, 2016 at 13:14

ahwayakchih

2,39122 silver badges25 bronze badges

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

2 Comments

Manish Tiwari Over a year ago

if i don't call event.preventDefault(); then this function $('form[name=contact_form]').submit(function(event) is not calling form directly submit..

ahwayakchih Over a year ago

It looks like there should be return false in if (phone==0) part too. You are returning false when phone is shorter than 10 chars, but not when it has length equal to 0.

Maytyn · Accepted Answer · 2016-05-23 13:30:34Z

0

$(this).submit();

When it's valid.

answered May 23, 2016 at 13:30

Maytyn

1221 silver badge10 bronze badges

Comments

user274926 · Accepted Answer · 2016-05-23 13:32:23Z

0

Try to replace the return true; for $(this).submit();

answered May 23, 2016 at 13:32

user274926

285 bronze badges

Comments

RoyaleWCheese1 · Accepted Answer · 2016-05-23 13:49:51Z

0

I usually do something like

$("#submit").submit(function(e){
    if(validateFields() == true){ //If all fields are valid
        $("#submit").submit();
    }
    else{
        e.preventDefault(e);
    }    
});

answered May 23, 2016 at 13:49

RoyaleWCheese1

1387 bronze badges

Collectives™ on Stack Overflow

How to submit form if validate using jquery?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related