Onclick validate form, if valid only submit form

Question

I have an html form that I first wish to validate with jQuery validation library jquery.validate.min.js and if form is valid, submit the form to a location.

I have attempted the following:

<html>
    <head>
        <link rel="stylesheet" href="../../common/view/css/bootstrap.min.css" type="text/css">
        <script src="../../common/view/js/jquery.js"></script>
        <script src="../../common/view/js/bootstrap.min.js"></script>
        <script src="../../common/view/js/jquery.validate.min.js"></script>

    </head>

    <body>
        <form method="post" action="stock-c.php" id="issueform" name="issueform">
            <input type="text" name="pid"/>
            <input type="button" name="button1" id="button1"/>
            <script type="text/javascript" src="js/issueValidation.js"></script>

            <!--Modal-->             
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                     <!--info to be displayed-->
                     <input type="submit" value="submit"/> <!--Explain1-->
                </div>
            </div>


        </from>
    </body>
</html>

issueValidation.js

$( document ).ready( function () {          
$validator= $( "#issueform" ).validate( {
        rules: {
                pid: "required",
        },
        messages: {
                pid: "Please enter a value",
        },
        errorElement: "em",
        errorPlacement: function ( error, element ) {
                // Add the `help-block` class to the error element
                error.addClass( "help-block" );

                if ( element.prop( "type" ) === "checkbox" ) {
                        error.insertAfter( element.parent( "label" ) );
                } else {
                        error.insertAfter( element );
                }
        },
        highlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
        },
        unhighlight: function (element, errorClass, validClass) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
        }
});

$('#button1').on('click', function() {
    $("#issueform").valid();    //everything works upto here
    if($validator.noOfInvalids()===0){     //this code doesn't work
        $('#myModal').modal('toggle');
    }
});

});

Explain1: I placed my submit button in the modal class which is within the form tags, so that when clicked the form data gets submitted.

Ideally I want to halt submission until form is validated. If the form is valid I must be able to review my form data in the modal and click the submit button on it, thereby making the from submit.

I tried using the submitHandler in jQuery validation plugin (which executes only when there are no invalids in the form) to initialize the modal, but to do that I need to change input[type="button"] to input[type="submit"] since the handler works only on the submit button. Then I end up with two submit buttons in the same form and the form doesn't submit properly.

Please help me rectify this issue. As a recap, I need to validate data entered to a form and request confirmation from user in a modal. If user confirms in modal, the data in the form gets submitted. If my method is an unnecessary method to achieve this outcome, alternative suggestions are also welcome as long as it conforms to the the requirement stated above. Thank You.

document.forms['formID'].reportValidity() returns true if all the form elements validity is true. (For non jQuery users) — Sathvik

Sparky Sparky · Accepted Answer · 2016-07-20T14:46:22

Ideally I want to halt submission until form is validated.

That's what the jQuery Validate plugin is already doing.

Your code...

$('#button1').on('click', function() {
    $("#issueform").valid();    //everything works upto here
    if($validator.noOfInvalids()===0){     //this code doesn't work
        $('#myModal').modal('toggle');
    }
});

As per docs, .valid() also returns a boolean, so the click handler part of your code above can be simplified greatly...

$('#button1').on('click', function() {
    if ($("#issueform").valid()) {
        // do something here when the form is valid
        $('#myModal').modal('toggle');
    }
});

I know you already mentioned this, but the following is for the benefit of future readers:

Please note that your click handler is required only because the input is a type="button".

Alternatively, when using a type="submit", your click handler is not needed because the click is automatically captured by the plugin. Also, in that case, you would use the submitHandler option to contain any code to run when the form is valid.

Onclick validate form, if valid only submit form

1 Answers