How do I validate a form in MVC on button click?

Question

In my wizard I am using three buttons Next Previous and Finish like

<div class="wizard-footer">
            <div class="pull-right">
                <input type='button' class='btn btn-next btn-fill btn-success btn-wd btn-sm' name='next' value='Next' />
                <input type='submit' id='btnSubmit' class='btn btn-finish btn-fill btn-success btn-wd btn-sm' name='finish' value='Finish' />

            </div>
            <div class="pull-left">
                <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' value='Previous' />
            </div>
            <div class="clearfix"></div>
        </div>

Next and Previous input type is button and Finish is submit type. So when I click on Submit all data annotation validation validate the form according to the validation rule I defined in Modes. Now I want to validate each step means when I click Next button all the Model validation should validate the form but when I click Previous validation should ignore.

Please help me on how to validate the form when Input type is Button in MVC. I google a lot but did not find any proper solution.

Answer 1

try bellow code,

$(".btn-next").click(function() {
    if ($("form").valid()) {
        //Some code to move on next tab
    } else {
        //Do something if form is InValid
        // Error messages will be auto populated, in case if you want some more furniture, use this block :)
    }
});

Demo