アプリにこのフォームがあり、AJAX 経由で送信しますが、クライアント側の検証には HTML5 を使用したいと考えています。したがって、おそらくjQueryを介して、フォームの検証を強制できるようにしたいと考えています。
フォームを送信せずに検証をトリガーしたい。出来ますか？
322841 次
21 に答える
481
特定のフィールドが有効かどうかを確認するには、次を使用します。
$('#myField')[0].checkValidity(); // returns true|false
フォームが有効かどうかを確認するには、次を使用します。
$('#myForm')[0].checkValidity(); // returns true|false
一部のブラウザー (Chrome など) のネイティブ エラー メッセージを表示したい場合、残念ながら次のようにフォームを送信するしか方法はありません。
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();
}
HTML5 検証は、現在のところすべてのブラウザーでサポートされているわけではないことに注意してください。
于 2012-08-08T14:42:42.850 に答える
49
以下のコードは私にとってはうまくいきます、
$("#btn").click(function () {
if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()
});
于 2019-06-24T12:39:34.887 に答える
38
私はこの解決策が私のために働くことがわかりました。次のように JavaScript 関数を呼び出すだけです。
action="javascript:myFunction();"
次に、html5の検証があります...本当に簡単です:-)
于 2013-02-06T16:42:47.807 に答える
33
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
from: html5 フォーム検証
于 2015-07-15T10:15:40.707 に答える
17
これが少しクリーンなより一般的な方法です：
次のようなフォームを作成します（何もしないダミーフォームにすることができます）。
<form class="validateDontSubmit">
...
本当に送信したくないすべてのフォームをバインドします。
$(document).on('submit','.validateDontSubmit',function (e) {
//prevent the form from doing a submit
e.preventDefault();
return false;
})
ここで、クリックするとフォームを検証する<a>（内に<form>）があるとします。
$('#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'
});
ここにいくつかのメモ：
- 検証を行うために実際にフォームを送信する必要がないことに気づきました。呼び出し
checkValidity()は十分です（少なくともChromeでは）。他のブラウザでこの理論をテストしてコメントを追加できる場合は、この回答を更新します。 - 検証をトリガーするものは、内にある必要はありません
<form>。これは、汎用ソリューションを実現するためのクリーンで柔軟な方法でした。
于 2013-02-27T16:38:27.753 に答える
15
パーティーに遅れるかもしれませんが、同様の問題を解決しようとしているときに、どういうわけかこの質問を見つけました。このページのコードが機能しなかったため、指定どおりに機能するソリューションを思いつきました。
問題は、<form>DOM に単一の<button>要素が含まれている場合です。一度起動すると、<button>フォームが自動的に送信されます。AJAX で遊んでいる場合は、おそらくデフォルト アクションを防止する必要があります。ただし、落とし穴があります。そうすると、基本的な HTML5 検証も妨げられます。したがって、フォームが有効な場合にのみ、そのボタンのデフォルトを防止することをお勧めします。それ以外の場合は、HTML5 の検証により、送信から保護されます。jQuerycheckValidity()はこれに役立ちます。
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
}
});
});
上記のコードを使用すると、フォームを送信せずに基本的な HTML5 検証 (型とパターンの一致を使用) を使用できます。
于 2016-09-13T12:23:35.510 に答える
6
「HTML5検証」とjavascript/jqueryを使用したHTMLフォームの検証の2つの異なることについて話します。
HTML5 には、フォームを検証するための組み込みオプションが「あります」。フィールドで「required」属性を使用するなど、(ブラウザーの実装に基づいて) javascript/jquery を使用しないとフォームの送信に失敗する可能性があります。
javascrip/jquery を使用すると、次のようなことができます
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});
于 2012-08-08T14:44:38.200 に答える
5
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
$('<input type="submit">').hide().appendTo($myForm).click().remove();
}
于 2016-12-21T07:43:06.523 に答える
3
これを実現するために jQuery は必要ありません。フォームに次を追加します。
onsubmit="return buttonSubmit(this)
または JavaScript で:
myform.setAttribute("onsubmit", "return buttonSubmit(this)");
関数 (またはそれbuttonSubmitを呼び出すもの) で、AJAX を使用してフォームを送信できます。buttonSubmitフォームが HTML5 で検証されている場合にのみ呼び出されます。
これが誰かを助ける場合、ここに私の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;
}
一部のフォームには複数の送信ボタンが含まれているため、この行if (submitvalue == e.elements[i].value). submitvalueクリックイベントを使用して値を設定しました。
于 2016-03-19T20:31:56.077 に答える
3
送信ボタンを使用せずにフォームのすべての必須フィールドを確認するには、以下の関数を使用できます。
コントロールに必要な属性を割り当てる必要があります。
$("#btnSave").click(function () {
$(":input[required]").each(function () {
var myForm = $('#form1');
if (!$myForm[0].checkValidity())
{
$(myForm).submit();
}
});
});
于 2013-10-04T06:35:27.530 に答える
2
フォームを送信しなくても実行できます。
たとえば、ID「検索」のフォーム送信ボタンが他のフォームにある場合。その送信ボタンでクリックイベントを呼び出し、その後 ev.preventDefault を呼び出すことができます。私の場合、フォーム A の送信からフォーム B を検証します。このような
function validateFormB(ev){ // DOM Event object
//search is in Form A
$("#search").click();
ev.preventDefault();
//Form B validation from here on
}
于 2014-02-14T06:37:08.517 に答える
2
さまざまなことを処理するために複数の送信ボタンが必要な、かなり複雑な状況がありました。たとえば、保存して削除します。
それも邪魔にならないというのが基本だったので、普通のボタンにはできませんでした。しかし、html5 検証も利用したいと考えていました。
同様に、ユーザーが Enter キーを押して予想されるデフォルトの送信をトリガーした場合に備えて、送信イベントがオーバーライドされました。この例では保存します。
これは、javascript の有無にかかわらず、および html5 検証を使用して、送信イベントとクリック イベントの両方で動作するようにフォームを処理する取り組みです。
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);
Javascript を使用する際の注意点は、コードで各ブラウザーをサポートせずにエラー メッセージを表示するには、ブラウザーのデフォルトの onclick が submit イベントに伝播する必要があることです。それ以外の場合、クリック イベントが event.preventDefault() でオーバーライドされるか、false が返された場合、ブラウザーの送信イベントに反映されません。
注意すべきことは、一部のブラウザーでは、ユーザーが Enter キーを押したときにフォームの送信をトリガーせず、代わりにフォームの最初の送信ボタンをトリガーすることです。したがって、それがトリガーされないことを示す console.log('form submit') があります。
于 2014-02-10T01:05:46.893 に答える
1
これは、フォームに対する最新の JS 制御を維持しながら、HTML5 に任意のフォームの検証を実行させる非常に簡単な方法です。唯一の注意点は、送信ボタンが 内にある必要があること<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...
}
于 2016-12-14T22:40:58.687 に答える
1
これは、フォーム検証を使用してネイティブの HTML 5 エラー メッセージを表示するために機能しました。
<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');
}
});
注: RegForm はform id.
希望は誰かを助けます。
于 2016-11-19T10:31:19.650 に答える
1
$(document).on("submit", false);
submitButton.click(function(e) {
if (form.checkValidity()) {
form.submit();
}
});
于 2015-12-19T05:49:34.763 に答える
1
これはすでに回答されていることは知っていますが、別の解決策があります。
jquery を使用している場合は、これを行うことができます。
まず、必要に応じて再利用できるように、jquery でいくつかの拡張機能を作成します。
$.extend({
bypassDefaultSubmit: function (formName, newSubmitMethod) {
$('#'+formName).submit(function (event) {
newSubmitMethod();
event.preventDefault();
}
}
});
次に、使用したい場所でこのようなことを行います。
<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>
于 2015-07-31T04:53:29.123 に答える