javascript - validacion - Detener envío de formulario predeterminado en Bootstrap Validator Form
validar formulario javascript html5 (3)
He visto esto preguntado un par de veces, pero no parecen aplicarse en mi situación.
Mi formulario se envía antes de que se pruebe la validación.
formar:
<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''
}
}
}
}
});
¿Alguna idea de cómo puedo desactivar el botón de enviar hasta que se valide el formulario?
Raramente trabajo con jQuery, así que mi conocimiento de sintaxis es pobre y escribo mis propios scripts de validación, por lo que no sé nada sobre Bootstrap Validator. Pero en el Javascript estándar / nativo tendría que cambiar la input type="submit" para input type="button" onclick="validateAndSend()" . Esa función contendría entonces el comando de enviar. Aquí hay un código de demostración:
<!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>
Demostración en vivo aquí: http://codepen.io/anon/pen/yDtab?editors=100 .
Al final, lo que tenía que hacer era desactivar la acción de formularios usando action="javascript:return;" y use un método Jquery AJAX para publicar los datos:
$(''#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''
}
}
}
}
});
Usted necesita hacer ésto:
$("#yourform").submit(function(ev){ev.preventDefault();});
$("#submit").on("click", function(){
var bootstrapValidator = $("#yourform").data(''bootstrapValidator'');
bootstrapValidator.validate();
if(bootstrapValidator.isValid())
$("#yourform").submit();
else return;
});