0

フォームの各要素で必須属性を使用して送信を押すと、フォームに入力するまでフォームが処理されないため、フォームの検証に問題がありますが、ファイルに関数 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 イベント内のコードは機能しません。

追加情報

上記のフォームが使用され、2 つのセクションに含まれています

<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'); })

ID をuser-formに追加すると、そのフォームが表示され、フィールドに入力または編集され、イベント jquery でデータが保存されます。

4

2 に答える 2

0 
$(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;
})
于 2013-05-23T18:39:14.647 に答える