Joe Joe - 2 months ago 13
jQuery Question

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');

}

});

Answer

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;
    }
}