/ 入力要素を検証した後に/ Ajaxフォームを送信する - javascript、jquery、html、ajax、フォーム

入力要素の検証後にAjaxフォームを送信する - javascript、jquery、html、ajax、forms

テキストボックスを使って情報を収集するフォームがあります。一部のテキストボックスには、縞模様があります。いくつかの入力ボックスは数字だけを取ります。

入力フィールドのパターン属性を使用して検証を追加することができました。 http://www.w3schools.com/tags/att_input_pattern.asp

ただし、ユーザーがフォームを送信するときには、別のエンドポイントにajax投稿要求を行う必要があります。そのため、デフォルトのフォーム送信を防ぐためにpreventDefault()メソッドを呼び出す必要があります。

しかしpreventDefault()を呼び出すと、入力フィールドの検証も無効になります。

入力フィールドが検証に合格した場合にのみ、検証フィールドを達成し、ajaxリクエストを行う方法はありますか。

回答:

回答№1は0

どちらでも使えます。

最初に変更 input[type="submit"] これに:

<button onclick="submitThis()">Save</button>

function submitThis() {
var firstInput = $("#idoffirstinput).val(); // basic validation
if(firstInput == "correctinput") {
$.ajax({
// send the ajax form
})
}
}

そこで提供されている手法、または私が提供した手法を使用して、各入力を個別に検証できます。 jQueryのエラーは同じになります。検証という意味です。

これを使って:

if(firstInput == "correctinput") {
// ajax form
} else {
// show the error popup!
}

これのプラスのポイントはあなたもエラーダイアログポップアップをスタイルすることができるということです。好き

$("#errordiv").css("border", "1px solid #hexcode");

そして、他のすべては同じです!


回答№2の場合は0
HTML and jQuery:
<form id="details">
Phone no: <input type="text" id="phone_no" pattern="[A-Za-z]{3}">
<input type="submit" id="submit">
</form>

var input   = $("#phone_no").val();
if(input != "")
{
var YOUR_URL = "www.example.com";
var formData = $("#details").serialize();// If you want to pass that data to that   URL
$.post(YOUR_URL,formData,function(result){

});
}
else
{
return false;
}