validacion - validar formulario jquery bootstrap
Cómo forzar la validación de un formulario html5 sin enviarlo a través de jQuery (20)
Tengo este formulario en mi aplicación y lo enviaré a través de AJAX, pero quiero usar HTML5 para la validación del lado del cliente. Así que quiero poder forzar la validación de formularios, tal vez a través de jQuery.
Quiero activar la validación sin enviar el formulario. ¿Es posible?
Aquí hay una forma más general que es un poco más limpia:
Cree su formulario como este (puede ser un formulario ficticio que no hace nada):
<form class="validateDontSubmit">
...
Enlaza todos los formularios que realmente no quieras enviar:
$(document).on(''submit'',''.validateDontSubmit'',function (e) {
//prevent the form from doing a submit
e.preventDefault();
return false;
})
Ahora digamos que tiene una <a> (dentro de <form> ) que al hacer clic, desea validar el formulario:
$(''#myLink'').click(function(e){
//Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
//has .validateDontSubmit class
var $theForm = $(this).closest(''form'');
//Some browsers don''t implement checkValidity
if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
return;
}
//if you''ve gotten here - play on playa''
});
Algunas notas aquí:
- Me he dado cuenta de que no es necesario enviar el formulario para que se realice la validación: la llamada a
checkValidity()es suficiente (al menos en Chrome). Si otros pueden agregar comentarios al probar esta teoría en otros navegadores, actualizaré esta respuesta. - Lo que dispara la validación no tiene que estar dentro de la
<form>. Esta era solo una forma limpia y flexible de tener una solución de propósito general.
De esta manera me funciona bien:
Agregue el atributo
onSubmiten suform, no olvide incluir lareturnen el valor.<form id=''frm-contact'' method=''POST'' action='''' onSubmit="return contact()">Definir la función.
function contact(params) { $.ajax({ url: ''sendmail.php'', type: "POST", dataType: "json", timeout: 5000, data: { params:params }, success: function (data, textStatus, jqXHR) { // callback }, error: function(jqXHR, textStatus, errorThrown) { console.log(jqXHR.responseText); } }); return false; }
Encontré esta solución para trabajar para mí. Simplemente llame a una función de javascript que le guste esto: action = "javascript: myFunction ();" Entonces tienes la validación html5 ... realmente simple :-)
Esta es una forma bastante directa de hacer que HTML5 realice la validación de cualquier formulario, mientras que todavía tiene el control moderno de JS sobre el formulario. La única advertencia es que el botón de envío debe estar dentro de <form> .
html
<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:/(/d{3}/)|/d{3})[- ]?/d{3}[- ]?/d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>
js
// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );
function newAcctSubmit()
{
var myForm = jQuery( "#newUserForm" );
// html 5 is doing the form validation for us,
// so no need here (but backend will need to still for security)
if ( ! myForm[0].checkValidity() )
{
// bonk! failed to validate, so return true which lets the
// browser show native validation messages to the user
return true;
}
// post form with jQuery or whatever you want to do with a valid form!
var formVars = myForm.serialize();
etc...
}
Esto funcionó para mostrar los mensajes de error HTML 5 nativos con la validación de formularios.
<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>
$(''#RegForm'').on(''submit'', function ()
{
if (this.checkValidity() == false)
{
// if form is not valid show native error messages
return false;
}
else
{
// if form is valid , show please wait message and disable the button
$("#btnRegister").html("<i class=''fa fa-spinner fa-spin''></i> Please Wait...");
$(this).find('':submit'').attr(''disabled'', ''disabled'');
}
});
Nota: RegForm es el form id .
Reference
La esperanza ayuda a alguien.
No necesitas jQuery para lograr esto. En su formulario agregue:
onsubmit="return buttonSubmit(this)
o en JavaScript:
myform.setAttribute("onsubmit", "return buttonSubmit(this)");
En la función de buttonSubmit (o como se llame), puede enviar el formulario utilizando AJAX. buttonSubmit solo será llamado si su formulario es validado en HTML5.
En caso de que esto ayude a alguien, aquí está mi función buttonSubmit :
function buttonSubmit(e)
{
var ajax;
var formData = new FormData();
for (i = 0; i < e.elements.length; i++)
{
if (e.elements[i].type == "submit")
{
if (submitvalue == e.elements[i].value)
{
submit = e.elements[i];
submit.disabled = true;
}
}
else if (e.elements[i].type == "radio")
{
if (e.elements[i].checked)
formData.append(e.elements[i].name, e.elements[i].value);
}
else
formData.append(e.elements[i].name, e.elements[i].value);
}
formData.append("javascript", "javascript");
var action = e.action;
status = action.split(''/'').reverse()[0] + "-status";
ajax = new XMLHttpRequest();
ajax.addEventListener("load", manageLoad, false);
ajax.addEventListener("error", manageError, false);
ajax.open("POST", action);
ajax.send(formData);
return false;
}
Algunos de mis formularios contienen varios botones de envío, de ahí esta línea if (submitvalue == e.elements[i].value) . Establecí el valor de submitvalue usando un evento de clic.
Para verificar si un determinado campo es válido, use:
$(''#myField'')[0].checkValidity(); // returns true/false
Para verificar si el formulario es válido, use:
$(''#myForm'')[0].checkValidity(); // returns true/false
Si desea mostrar los mensajes de error nativos que tienen algunos navegadores (como Chrome), desafortunadamente, la única forma de hacerlo es enviando el formulario, de esta manera:
var $myForm = $(''#myForm'');
if(! $myForm[0].checkValidity()) {
// If the form is invalid, submit it. The form won''t actually submit;
// this will just cause the browser to display the native HTML5 error messages.
$myForm.find('':submit'').click();
}
Espero que esto ayude. Tenga en cuenta que la validación de HTML5 no es compatible con todos los navegadores.
Para verificar todos los campos de formulario requeridos sin usar el botón enviar, puede usar la siguiente función.
Tienes que asignar el atributo requerido a los controles.
$("#btnSave").click(function () {
$(":input[required]").each(function () {
var myForm = $(''#form1'');
if (!$myForm[0].checkValidity())
{
$(myForm).submit();
}
});
});
Puede llegar tarde a la fiesta, pero de alguna manera encontré esta pregunta al intentar resolver un problema similar. Como ningún código de esta página funcionó para mí, mientras tanto se me ocurrió una solución que funciona como se especifica.
El problema es cuando su <form> DOM contiene un solo elemento <button> , una vez activado, ese <button> se sumbit automáticamente. Si juegas con AJAX, probablemente debas evitar la acción predeterminada. Pero hay un problema: si lo haces, también evitarás la validación básica de HTML5. Por lo tanto, es una buena decisión evitar los valores predeterminados en ese botón solo si el formulario es válido. De lo contrario, la validación de HTML5 lo protegerá de enviar. jQuery checkValidity() ayudará con esto:
jQuery:
$(document).ready(function() {
$(''#buttonID'').on(''click'', function(event) {
var isvalidate = $("#formID")[0].checkValidity();
if (isvalidate) {
event.preventDefault();
// HERE YOU CAN PUT YOUR AJAX CALL
}
});
});
El código descrito anteriormente le permitirá utilizar la validación básica de HTML5 (con el tipo y la coincidencia de patrones) SIN enviar el formulario.
Puedes hacerlo sin enviar el formulario.
Por ejemplo, si el botón de envío de formulario con id "buscar" está en el otro formulario. Puede llamar al evento click en ese botón de envío y llamar a ev.preventDefault después de eso Para mi caso, validé el formulario B del formulario A. Me gusta esto
function validateFormB(ev){ // DOM Event object
//search is in Form A
$("#search").click();
ev.preventDefault();
//Form B validation from here on
}
Sé que esto ya ha sido respondido, pero tengo otra solución posible.
Si usas jquery, puedes hacer esto.
Primero cree un par de extensiones en jquery para que pueda volver a usarlas según sea necesario.
$.extend({
bypassDefaultSubmit: function (formName, newSubmitMethod) {
$(''#''+formName).submit(function (event) {
newSubmitMethod();
event.preventDefault();
}
}
});
Luego haz algo como esto donde quieras usarlo.
<script type="text/javascript">
/*if you want to validate the form on a submit call,
and you never want the form to be submitted via
a normal submit operation, or maybe you want handle it.
*/
$(function () {
$.bypassDefaultSubmit(''form1'', submit);
});
function submit(){
//do something, or nothing if you just want the validation
}
</script>
Tuve una situación bastante compleja, en la que necesitaba múltiples botones de envío para procesar diferentes cosas. Por ejemplo, guardar y eliminar.
La base era que también era discreto, por lo que no podía simplemente convertirlo en un botón normal. Pero también quería utilizar la validación html5.
Además, el evento de envío se anuló en caso de que el usuario presionara Intro para activar el envío predeterminado esperado; en este ejemplo guardar.
Estos son los esfuerzos del procesamiento del formulario para seguir trabajando con / sin javascript y con la validación html5, tanto con eventos de envío como de clic.
Demostración de jsFiddle: validación HTML5 con enviar y hacer clic en anulaciones
xHTML
<form>
<input type="text" required="required" value="" placeholder="test" />
<button type="submit" name="save">Save</button>
<button type="submit" name="delete">Delete</button>
</form>
JavaScript
//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
var isValid = null;
var form = $(''form'');
var submitButton = form.find(''button[type="submit"]'')
var saveButton = submitButton.filter(''[name="save"]'');
var deleteButton = submitButton.filter(''[name="delete"]'');
//submit form behavior
var submitForm = function(e){
console.log(''form submit'');
//prevent form from submitting valid or invalid
e.preventDefault();
//user clicked and the form was not valid
if(isValid === false){
isValid = null;
return false;
}
//user pressed enter, process as if they clicked save instead
saveButton.trigger(''click'');
};
//override submit button behavior
var submitClick = function(e){
//Test form validitiy (HTML5) and store it in a global variable so both functions can use it
isValid = form[0].checkValidity();
if(false === isValid){
//allow the browser''s default submit event behavior
return true;
}
//prevent default behavior
e.preventDefault();
//additional processing - $.ajax() etc
//.........
alert(''Success'');
};
//override submit form event
form.submit(submitForm);
//override submit button click event
submitButton.click(submitClick);
})(jQuery);
La advertencia para usar Javascript es que el clic predeterminado del navegador debe propagarse al evento de envío DEBE ocurrir para mostrar los mensajes de error sin admitir cada navegador en su código. De lo contrario, si el evento de clic se reemplaza con event.preventDefault () o devuelve false, nunca se propagará al evento de envío del navegador.
Lo que hay que señalar es que, en algunos navegadores, no se activará el envío del formulario cuando el usuario presiona Intro, sino que activará el primer botón de envío en el formulario. Por lo tanto, hay un console.log (''formulario de envío'') para mostrar que no se dispara.
Usted habla de dos cosas diferentes "validación HTML5" y validación de formulario HTML usando javascript / jquery.
HTML5 "tiene" opciones incorporadas para validar un formulario. Como usar el atributo "requerido" en un campo, que podría (según la implementación del navegador) fallar el envío del formulario sin usar javascript / jquery.
Con javascrip / jquery puedes hacer algo como esto
$(''your_form_id'').bind(''submit'', function() {
// validate your form here
return (valid) ? true : false;
});
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
No es la mejor respuesta pero funciona para mí.
$(document).on("submit", false);
submitButton.click(function(e) {
if (form.checkValidity()) {
form.submit();
}
});
$(document).ready(function () {
var obj = {};
$("#click_radio").click(function () {
//Function to get the dropdown list using AJAX
$.ajax({
type: "get",
url: "json/droplist1.json",
dataType: "json",
success: function (res) {
populateDropDown1(res)
}
})
$.ajax({
type: "get",
url: "json/droplist2.json",
dataType: "json",
success: function (res) {
populateDropDown2(res)
}
})
$.ajax({
type: "get",
url: "json/droplist3.json",
dataType: "json",
success: function (res) {
populateDropDown3(res)
}
})
//Internal function to populate the dropdown list
function populateDropDown1(data) {
$.each(data, function (index, val) {
$("#list1").append(''<option key='' + val.key + ''>'' + val.value + ''</option>'');
});
}
function populateDropDown2(data) {
$.each(data, function (index, val) {
$("#list2").append(''<option key='' + val.key + ''>'' + val.value + ''</option>'');
});
}
function populateDropDown3(data) {
$.each(data, function (index, val) {
$("#list3").append(''<option key='' + val.key + ''>'' + val.value + ''</option>'');
});
}
$(''#person_form'').show();
})
$("#submit").click(function (e) {
e.preventDefault();
var namefl = 0, numbf = 0;
var namef = $("#name").val();
var phnenumb = $("#numb").val();
var list11 = $("#list1").val();
var list12 = $("#list2").val();
var list13 = $("#list3").val();
localStorage.setItem(''name'', $("#name").val());
localStorage.setItem(''number'', $("#numb").val());
localStorage.setItem(''list11'', $("#list1").val());
localStorage.setItem(''list12'', $("#list2").val());
localStorage.setItem(''list13'', $("#list3").val());
if (namef.length < 2 || namef.length > 15) {
$("#nameerror").show();
namefl = 0;
}
else {
namefl = 1;
$("#nameerror").hide();
}
// if(phnenumb.length<10 || phnenumb.isNaN()){
// $("#name").addClass(''error'');
// }
// else{
// $("#name").removeClass(''error'');
// }
if (namefl == 1) {
$("#person_form").load("partials.html");
}
$.ajax({
type: "get",
dataType: "json",
url: "json/drag_droplist.json",
success: function (res) {
populateSecondPageList(res);
}
})
})
//populate data in the first list box
function populateSecondPageList(result) {
$.each(result, function (index, value) {
$("#draglist").append(''<li draggable="true" ondragstart="drag(event)" id="drag'' + index + ''" class="list-item"><span class="key">'' + value.key + '' </span><span class="value">'' + value.value + ''</span></li>'');
})
}
$(document).on("click", "#submitList", function () {
var namef = localStorage.getItem(''name'');
var numb = localStorage.getItem(''number'');
var list1f = localStorage.getItem(''list11'');
var list2f = localStorage.getItem(''list12'');
var list3f = localStorage.getItem(''list13'');
var dropname = localStorage.setItem(''drpval'', sampleData.value);
var dropnam = localStorage.getItem(''drpval'');
var obj = { namef, numb, list1f, list2f, list3f, dropnam };
console.log(obj);
$.ajax({
type: "POST",
data: obj,
dataType: "json",
url: "https://reqres.in/api/users",
success: function (result) {
$("#myModal").modal(''show'');
$(''#myModal .modal-body'').html("<p>" + obj.namef + "</p> <p> " + obj.numb + "</p><p>" + obj.list1f + "</p><p>" + obj.list2f + "</p><p>" + obj.list3f + "</p><p>" + obj.dropnam + "</p>");
},
error: function (result) {
alert(''error'');
console.log(result);
}
});
})
});
//drag and drop
var dragleave = "";
var sampleData = {};
function allowDrop(ev) {
ev.preventDefault();
ev.target.innerHTML = "";
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
$(".list-unstyled li").css("display", "block");
ev.preventDefault();
// console.log(ev.target);
var data = ev.dataTransfer.getData("text");
// console.log(document.getElementById(data));
ev.target.innerHTML = document.getElementById(data).innerHTML;
$(".list-unstyled #" + data).css("display", "none");
//console.log($("#"+data).html());
if ($("#" + data).html()) {
sampleData = { "key": $("#" + data + " .key").html(), "value": $("#" + data + " .value").html() };
}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<title></title>
<style>
.div{
width:100px;
height:100px;
border:1px solid black;
}
#div1{
width:20px;
height:20px;
background: red;
}
#div2{
width:20px;
height:20px;
background: blue;
}
#div3{
width:20px;
height:20px;
background: black;
}
</style>
<script>
var initial="";
function allowDrop(e)
{
e.preventDefault();
}
function drag(e){
e.dataTransfer.setData("div",e.target.id);
}
function drop(e)
{
e.preventDefault();
var data = e.dataTransfer.getData("div");
if(initial=="")
{
initial = $("#"+data);
e.target.appendChild($("#"+data)[0]);
}else{
$("#draghere").append(initial);
e.target.appendChild($("#"+data)[0]);
initial = $("#"+data);
}
}
// function drop(e)
// {
// e.preventDefault();
// var data = e.dataTransfer.getData("div");
// e.target.appendChild($("#"+data)[0]);
// }
$(document).ready(function(){
});
</script>
</head>
<body>
<div class="div" id="draghere" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="item" id="div1" draggable="true" ondragstart="drag(event)">
</div>
<!-- <div class="item" id="div2" draggable="true" ondragstart="drag(event)">
</div>
<div class="item" id="div3" draggable="true" ondragstart="drag(event)">
</div> -->
</div>
<div class="div" id="draghere1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<input type="text" name="asfa" id="tt" maxlength="10" onkeypress="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45" onpaste="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<label><input type="radio" id="click_radio" value="click">click</label>
</div>
<div class="row">
<div class="col-md-8" id="person_form">
<form>
<fieldset>
<p><strong>pick your colour</strong></p>
<div class="row">
<div class="col-md-4 form-group">
<label>color</label>
<select class="form-control" id="list1"></select>
</div>
<div class="col-md-4 form-group">
<label>sports</label>
<select class="form-control" id="list2"></select>
</div>
<div class="col-md-4 form-group">
<label>books</label>
<select class="form-control" id="list3"></select>
</div>
</div>
<div class="row">
<div class="col-md-6" >
<label class="col-md-12">name</label>
<input type="text" class="col-md-12 form-control" id="name">
<p id="nameerror"> This field is required</p>
</div>
<div class="col-md-6">
<label>phone number</label>
<input type="text" class="col-md-12 form-control" id="numb">
</div>
</div>
<div class="row">
<button class="btn btn-success pull-right" id="submit" type="submit">go to code</buttn>
</div>
</fieldset>
</form>
</div>
<div class="row second">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<ul id="draglist" class="list-unstyled">
</ul>
</div>
<div class="col-md-6">
<ul id="droplist" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<button class="btn btn-success pull-right" id="submitList">Submit</button>
</div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>You have successfully completed the application!!!</p>
</div>
<div class="modal-footer footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 pull-right">
<h1>Benefits</h1>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
var $myForm = $(''#myForm '');
if (!$myForm[0].checkValidity()) {
$(''<input type="submit">'').hide().appendTo($myForm).click().remove();
}