Search code examples
javascriptjqueryvalidationbootstrap-modalbootbox

How to validate inputs inside form and submit button outside the form


Based on requirement I am trying to validate the form.

Actually I am passing form input elements in bootbox modal dialog and passing submit button dynamically in modal dialog.

When input type=submit is there it is able to validate form inputs.But is there is no submit button inside form as i am passing it in modal, it is not able to validate form. For example:

<form id="form_id">
Name:<input type="text" required>
<input type="submit" value="Submit">
</form>

$("#form_id").submit(function(e)){
//validation is ok
return false;
}

this is ok but, now in modal:

    var data="<form id="form_id">
    Name:<input type="text" required>
    </form>"; //getting from server

            $.ajax({
            url : 'url',
            type : 'get',
            async : true,
            data : data,
            success : function(data) {
                modalDialog = bootbox.dialog({
                    size : 'large',
                    title : "Title"
                    show : false,
                    message : data,
                    buttons : {
                        success: {
                            label : "Close window",
                            className : "btn-default",
                            callback : function() {
  return false;
        //after clicking submit button it should ask required if no data input,and stay in dialog as what happened previous scenario.But dialog is closed.

                            }
                        }
                    }
                });
                modalDialog.on('shown.bs.modal', function() {
                });

                modalDialog.modal('show');

            }

        });

Solution

  • Try like this

    Add required to your input type in html

     <form id="frmPlate">
        <input type="text" name="Name" required="required" />
    </form>
    <button type="submit" onclick="CheckValidation();"> Submit</button>
    

    And you can validate in jquery like below code

    function CheckValidation(){
        var frmvalid = $("#frmPart").valid();
        if (!frmvalid) {
            return false;
        }
    }