Jquery form not submitting after validation

Question

Not sure why, but my form will not submit after I validate it. I am aware I shouldn't use any input fields with the name or ID of "submit" which I am not doing. I am assuming the prevent default method is stopping the submission? How can I validate before submission?

<form method="post" id="offersForm" enctype="multipart/form-data">
        <input type="text" name="offerTitle" id="offerTitle" maxlength="70" class="form-control yellow" placeholder="Offer title" value="" />


        <input type="submit" id="addOffer" name="addOffer" class="btn button-black" value="Add Offer" />
     </form> 


<script type="text/javascript">
$(document).ready(function() {

  $('#offersForm').submit(function(e) {
        e.preventDefault();
        var offerTitle = $('#offerTitle').val();

        $(".error").removeClass('error');

        if (offerTitle.length < 1) {
            $('#offerTitle').addClass('error');
            return false;
        }

        return true

    });
  });
</script>

this code will not work. If you can use jqueryvalidation.org this plugin that will fix the issue. Otherwise just use normal button and when the button click check your field empty and if not sumbit the form. — Sameera Liyanage
– Sameera Liyanage, Commented Oct 11, 2019 at 12:02

Chandrashekhar Komati · Accepted Answer · 2019-10-11 12:15:14Z

1

Please check man I have fixed your code.

$(document).ready(function() {

  $('#addOffer').click(function() {
        
        var offerTitle = $('#offerTitle').val();

        $(".error").removeClass('error');

        if (offerTitle.length < 1) {
            $('#offerTitle').addClass('error');
            return false;
        }
      $('#offersForm').submit();
        return true

    });
  });

.error{
    border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="offersForm" enctype="multipart/form-data">
        <input type="text" name="offerTitle" id="offerTitle" maxlength="70" class="form-control yellow" placeholder="Offer title" value="" />


        <input type="button" id="addOffer" name="addOffer" class="btn button-black" value="Add Offer" />
     </form>

answered Oct 11, 2019 at 12:15

Chandrashekhar Komati

7941 gold badge5 silver badges21 bronze badges

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

1 Comment

Dan Over a year ago

Perfect, thanks - so in short, don't use the jquery .submit method for the form, use the on click method on the submit button, which is not a form submit button! Works great now, thanks!

Sameera Liyanage · Accepted Answer · 2019-10-11 12:07:24Z

$(document).ready(function() {

  $('#addOffer').click(function(e) {
        e.preventDefault();
        var offerTitle = $('#offerTitle').val();

        $(".error").removeClass('error');

        if (offerTitle.length < 1) {
            $('#offerTitle').addClass('error');
            return false;
        }
      $('#offersForm').submit();
        return true

    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="offersForm" enctype="multipart/form-data">
        <input type="text" name="offerTitle" id="offerTitle" maxlength="70" class="form-control yellow" placeholder="Offer title" value="" />


        <input type="button" id="addOffer" name="addOffer" class="btn button-black" value="Add Offer" />
     </form>

Collectives™ on Stack Overflow

Jquery form not submitting after validation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related