Menu
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?
828
Use the return value of the function to stop the execution of a form in JavaScript. False would return if the form fails to submit.
Error trigger: it's a known feature of Chrome 10, if required is present in input [1]. Solution: use formnovalidate in whatever button that triggers the prompt [2], or simply use novalidate in form tag.
Required attribute: If you want to make an input mandatory to be entered by the user, you can use the required attribute. This attribute can be used with any input type such as email, URL, text, file, password, checkbox, radio, etc. This can help to make any input field mandatory.
Here's how form validation works with Bootstrap: HTML form validation is applied via CSS's two pseudo-classes, :invalid and :valid . It applies to <input> , <select> , and <textarea> elements. Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form> .
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
