I have seen this asked a couple of times, but they don't seem to apply in my situation.
My form is being submitted before the validation is tested.
form:
<form accept-charset="UTF-8" action="/user/fact" data-bv-submitbuttons="button[type='submit']" data-remote="true" data-toggle="validator" id="user_fact_form" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<div class="form-group">
<label for="key">Title</label>
<input class="form-control" id="key" name="key" type="text" value="" />
</div>
<div class="form-group">
<label for="value">Value</label>
<input class="form-control" id="value" name="value" type="text" value="" />
</div>
<div class="form-group">
<input class="btn btn-primary" disable="true" name="commit" type="submit" value="Add" />
</div>
</form>
javascript:
$('#user_fact_form').bootstrapValidator({
live: 'enabled',
message: 'This value is not valid',
submitButton: '$user_fact_form button[type="submit"]',
submitHandler: function(validator, form, submitButton) {
$.post(form.attr('action'), form.serialize(), function (result) {
$("#facts_tbody").append(result.data);
});
return false;
},
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
key: {
selector: '#key',
validators: {
notEmpty: {
message: 'The title is required and cannot be empty'
}
}
},
value: {
selector: '#value',
validators: {
notEmpty: {
message: 'The value is required and cannot be empty'
}
}
}
}
});
Any ideas how I can disable the submit button until the form is validated?
In the end, what I needed to to do was disable the forms action using action="javascript:return;" and use a Jquery AJAX method to post the data:
$('#user_fact_form').bootstrapValidator({
live: 'enabled',
message: 'This value is not valid',
submitButton: '$user_fact_form button[type="submit"]',
submitHandler: function(validator, form, submitButton) {
$.ajax({
type: 'POST',
url: 'my_form.url',
data: $(form).serialize(),
success: function(result) {
$("#facts_tbody").append(result);
$("#key").val('');
$("#value").val('');
$("#user_fact_form").data('bootstrapValidator').resetForm();
}
});
return false;
},
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
key: {
selector: '#key',
validators: {
notEmpty: {
message: 'The title is required and cannot be empty'
}
}
},
value: {
selector: '#value',
validators: {
notEmpty: {
message: 'The value is required and cannot be empty'
}
}
}
}
});
You need to do this:
$("#yourform").submit(function(ev){ev.preventDefault();});
$("#submit").on("click", function(){
var bootstrapValidator = $("#yourform").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid())
$("#yourform").submit();
else return;
});
I rarely work with jQuery so my syntax knowledge of that is poor, and I write my own validation scripts, so I don't know anything about Bootstrap Validator. But in vanilla/native Javascript you would have to change the input type="submit" to input type="button" onclick="validateAndSend()". That function would then contain the submit command. Here is a demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Submit with/without validation</title>
</head>
<body>
<form name="theForm" action="form_data_handler.php">
<input type="text" name="firstField"><br>
<input type="button" value="Validate and send" onclick="validateAndSend()"><br>
<input type="submit" value="Just send">
</form>
<script>
function validateAndSend() {
if (theForm.firstField.value == '') {
alert('The first field is a required field.');
return false;
}
else
theForm.submit();
}
</script>
</body>
</html>
Live demo here: http://codepen.io/anon/pen/yDtab?editors=100.
