How to trigger form validation on checkout button click

Question

Shopping cart contains html5 quantity validation as show in code below. If clicked in Refresh button, browser shows error message and cancels submit.

If clicked in Checkout button, checkout url is invoked without validation.

How to trigger form validation if Chekcoutr button is pressed and cancel checkout button press if form is invalid.

It is possible to use post request for Checkout button or refactor code to use multiple submit buttons if this helps.

Bootstrap 3, jquery, ASP.NET MVC3, Mono are used.

<form action="/ShoppingCart/Update">
<input type="hidden" value='TOUR33' name='product' />
<input name="quantity" type="number" value="48000" max='1536' min="0" step="24" />
<input type='submit' value='Refresh' />
</form>
<a class="btn btn-success" href="/Checkout/Address">Checkout</a>

isn't it possible to keep <input type="submit"/> instead of <a>? — Guruprasad J Rao
– Guruprasad J Rao, Commented Jul 15, 2015 at 12:51
@GuruprasadRao How to invoke /Checkout/Address if second submit button is used ? For this url there is no need to post form data. Form data can posted if this makes solution easier — Andrus
– Andrus, Commented Jul 15, 2015 at 13:15
just keep your submit button inside form and onclick of that write an event handler to handle valid and invalid form — Guruprasad J Rao
– Guruprasad J Rao, Commented Jul 15, 2015 at 14:02
code in question contains button in a element. This is not submit button. Submit button in code in form works OK — Andrus
– Andrus, Commented Jul 15, 2015 at 14:12

hutchonoid · Accepted Answer · 2015-07-15 13:23:13Z

0

I guess you should use js for this:

$('a.btn-success').click(function () {
   if ($("form").valid()) //trigger your form validation
   {
      return true;
   }
      return false;
 });

edited Jul 15, 2015 at 13:23

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

answered Jul 15, 2015 at 12:49

teo van kot

12.5k10 gold badges41 silver badges73 bronze badges

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

6 Comments

Andrus Over a year ago

I tried but got javascript error Uncaught TypeError: $(...).valid is not a function How to fix ?

teo van kot Over a year ago

@Andrus uh, you using server side validation? Or what kind of validation?

Andrus Over a year ago

No. I'm using only code from this answer. For unknown reason $("form").valid() is not defined

Andrus Over a year ago

I tried also <form id='cart-form' ... > and $('#cart-form').valid() but problem persists

teo van kot Over a year ago

I don't understand what kind of validation do you use. By default MVC has jquery.validate in project. You can read about your error here. You should just add scripts

|

Collectives™ on Stack Overflow

How to trigger form validation on checkout button click

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related