Html5 验证和 jquery ajax答案

【问题标题】：Html5 validation and jquery ajaxHtml5 验证和 jquery ajax
【发布时间】：2013-05-23 07:12:45
【问题描述】：

我在验证表单时遇到问题，因为如果我在表单的每个元素中使用 required 属性并按下提交，则在填写表单之前不会处理表单，但在我的文件中我添加了一个函数 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 事件发送带有“必需”属性的 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 添加到 user-form：

$('#lSignUp').on('click', function() { $('.user-form').attr('id','save-user'); })

如果我点击 lEdit..

$('#lEdit').on('click', function() { $('.user-form').attr('id','edit-user'); })

在user-form添加ID后，显示该表单以填充或编辑字段并使用事件jquery保存数据。

【问题讨论】：

标签： jquery ajax html validation required

【解决方案1】：

代替

$('.saveUser').on('click',function() {

使用

$('.user-form').on('submit',function(e) {
    e.preventDefault();

【讨论】：

对不起，但不起作用，当点击表单提交时，不处理事件 jquery 中的信息（序列化，consolo.log，返回 false..）
如果使用 $('.user-form... 则有效...但该表单在我的应用程序的两个部分中使用.. 然后单击链接时，ID (#save-user) 是添加到表单然后我这样做 $('#save-user').on('submit',function(e) { e.preventDefault(); } 但是这个指令不起作用..有什么想法吗？跨度>
您的页面上有 2 个表单吗？您是否在运行时更改 ID？你点击什么链接？请更新您的问题。目前还不清楚。

【解决方案2】：

$(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;
})

【讨论】：