[英]Submit form with html5 validation and jquery ajax
我在验证表单时遇到问题,因为如果我在表单的每个元素中使用必填属性,然后按提交,则在填写表单之前不会处理表单,但是在我的文件中,我添加了一个功能functions.js,单击按钮发送数据表单,则不再尊重html5验证,并且想知道为什么会发生这种情况。
没有jQuery事件
形成
<form class="user-form" method="post">
<p><i>Todos los campos son requeridos!</i></p>
<p>
<input id="uName" class="span5" name="uName" type="text" placeholder="Nombre completo" required/>
</p>
<p>
<input id="uEmail" class="span5" name="uEmail" type="email" placeholder="E-mail" required/>
</p>
<p>
<input id="uUser" class="span5" name="uUser" type="text" placeholder="Usuario" required/>
</p>
<p>
<input id="uPasswd" class="span5" name="uPasswd" type="password" placeholder="Contraseña" required/>
</p>
<p>
<select id="uType" class="span5" name="uType" required>
<option value="0">Tipo de usuario</value>
<option value="1">Emisor</value>
<option value="2">Revisor</value>
</select>
</p>
<p>
<input class="saveUser btn btn-primary" type="submit" value="Guardar"/>
</p>
</form>
jQuery事件
$('.saveUser').on('click',function() {
data = $('.user-form').serializeArray();
data.push({
name: 'tag',
value: 'saveUser'
})
console.log(data);
return false;
/* I put the above code for check data before send to ajax*/
$.ajax({
url: url,
type: 'post',
data: data,
success: function (data) {
if (data.success) {
} else {
}
}
});
return false;
})
然后,如果我使用jquery事件通过带有“ required”属性的ajax html5验证发送数据,则无法正常工作。
如果我单击.save-user更改为提交表单,则可以进行html5验证,但不能在jquery事件中使用代码。
附加信息
上面的表格已使用并包含在两个部分中
<a href="#" id="lSignup">Sign-up Free</a>
<section id="sign-up">
/* Form */
</section>
<a href="#" id="lEdit">Edit information</a>
<section id="edit-user">
/* Form */
</section>
然后,当我单击lSignup时,向用户表单添加一个ID:
$('#lSignUp').on('click', function() { $('.user-form').attr('id','save-user'); })
如果我单击lEdit ..
$('#lEdit').on('click', function() { $('.user-form').attr('id','edit-user'); })
在将ID添加到用户表单后 ,该表单将显示为填充或编辑字段并保存事件jquery来保存数据。
$(document).on('submit','#save-user',function(e) {
e.preventDefault();
data = $(this).serializeArray();
data.push({
name: 'tag',
value: 'saveUser'
})
console.log(data);
/* I put the above code for check data before send to ajax*/
$.ajax({
url: url,
type: 'post',
data: data,
success: function (data) {
if (data.success) {
} else {
}
}
});
return false;
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.