So i have a form that has two submit buttons, but for each i want to validate different fields, in this case when i click on the preview submit button i want to ignore 3 fields, while in the 'normal' submit button i want to validate all. Is this possible?
Here's some html:
<form class="form" role="form" id="searchesForm">
<input class="form-control" type="text" id="name" name="name"/>
<input class="form-control" type="text" id="widgetWidth" name="widgetWidth" />
<input class="form-control" type="text" id="widgetHeight" name="widgetHeight" />
<!-- More fields validated for both button clicks-->
...
<button type="button" id="preview" name="previewSearch" class="btn btn-default" >
Preview
</button>
<button type="submit" id="submit" name="submitSave" class="btn btn-primary">
Save
</button>
</form>
So the idea is that when i press the preview button these 3 fields(name, widgetWidth and widgetHeight) should be ignored, but not when i press the save button.
Here's my bootstrap validator:
$('#searchesForm').bootstrapValidator({
excluded: ['td>select,td>input,td>textarea'],
feedbackIcons:{
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
live:'submitted',
submitButtons:'[type="submit"]',
fields: {
name: {
validators: {
notEmpty: {
enabled:function(){
debugger;
alert("testes");
},
message: 'The question required and cannot be empty'
}
}
}
}
}).on('success.form.bv',function(e){
// Prevent form submission
e.preventDefault();
//check which button was pressed
var button=$(e.target).data('bootstrapValidator').getSubmitButton();
if($(button).attr("id")==="preview"){
previewSearch();//do ajax stuff
}else{
saveSearch();//do ajax stuff
}
}).on('error.form.bv',function(e){
var invalidFields=$(e.target).data('bootstrapValidator').getInvalidFields();
//show tab for specific fields location
$.each(invalidFields,function(index,value){
if($("#filtros").has(value).length > 0){
$('#tabs li:eq(0) a').tab('show')
}
if($("#resultado").has(value).length > 0){
$('#tabs li:eq(1) a').tab('show')
}
if($("#widget").has(value).length > 0){
$('#tabs li:eq(2) a').tab('show')
}
});
}).on('status.field.bv', function (e, data) {
if (data.bv.getSubmitButton()) {
data.bv.disableSubmitButtons(false);
}
if(data.bv.getSubmitButton()) {
if (data.bv.getSubmitButton().attr("id") === "preview"){
if (data.field === "name" || data.field === "widgetWidth" || data.field === "widgetHeight") {
data.bv.$form.bootstrapValidator('enableFieldValidators', data.field, 'notEmpty', false);
}
}else{
data.bv.$form.bootstrapValidator('enableFieldValidators', data.field, 'notEmpty', true);
}
}
});
I don't really know where can we enable/disable the field validator according to the button pressed. i tried to change the status of the fields validator on the .on('status.field.bv'...) method but it doesn't work completely. Also the submitButtons don't seem to work if i choose something other than "type=submit".
So has anyone come up with this situation?