jQuery経由で送信せずにhtml5フォーム検証を強制する方法
私は自分のアプリにこのフォームを持っており、AJAX経由でそれを送信するつもりですが、クライアントサイドの検証にはHTML5を使いたいのです。だから私はおそらくjQueryを介して、フォームの検証を強制できるようにしたいです。
フォームを送信せずに検証を開始したいです。出来ますか？
特定のフィールドが有効かどうかを確認するには、次のようにします。
$('#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検証はすべてのブラウザでサポートされているわけではないことに注意してください。
私はこの解決策がうまくいくことがわかった。このようなJavaScript関数を呼び出すだけです。
action="javascript:myFunction();"
それなら、あなたはhtml5バリデーションを持っています...本当に簡単です:-)
これは、もう少し一般的な方法です。
このようにあなたのフォームを作成します（何もしないダミーフォームになることができます）。
<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()の呼び出しで十分です（少なくともクロムで）。他のブラウザでこの理論をテストして他の人がコメントを追加できる場合は、この回答を更新します。 - 検証を引き起こすものは、
<form>内にある必要はありません。これは、汎用的な解決策を得るための単なるクリーンで柔軟な方法でした。
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
from： html5フォーム検証
パーティーに遅れるかもしれませんが、それでも、どういうわけか私が同様の問題を解決しようとしている間にこの質問を見つけました。このページのコードではうまくいきませんでしたが、その間に、指定されたとおりに機能するソリューションを思いついたのです。
<form> DOMが単一の<button>要素を含むときに問題が発生します。これは一度起動されると、<button>が自動的にフォームを埋め込むことになります。あなたがAJAXで遊んでいるなら、あなたはおそらくデフォルトの行動を防ぐ必要があります。しかし、これには注意が必要です。そうするだけでは、基本的なHTML 5検証も妨げられます。したがって、フォームが有効な場合にのみ、そのボタンのデフォルトを禁止することをお勧めします。それ以外の場合は、HTML 5検証によって送信からあなたを保護します。 jQueryのcheckValidity()はこれに役立ちます：
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検証（タイプとパターンのマッチングを使用）を使用できます。
「HTML5検証」とjavascript/jqueryを使用したHTMLフォームの検証の2つの異なる点について話しました。
HTML5にはフォームを検証するための組み込みオプションがあります。 （ブラウザの実装に基づいて）javascript/jqueryを使用せずにフォームの送信に失敗する可能性がある、フィールドで "required"属性を使用するなど.
Javascrip/jqueryを使えば、このようなことをすることができます
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
$('<input type="submit">').hide().appendTo($myForm).click().remove();
}
これを実現するのに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の値を設定します。
異なることを処理するために複数の送信ボタンが必要な、かなり複雑な状況がありました。たとえば、保存して削除します。
根拠はそれも邪魔にならないということだったので、私はそれを普通のボタンにすることはできませんでした。しかし、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が送信イベントに伝播する必要があることです。それ以外の場合、clickイベントがevent.preventDefault（）でオーバーライドされるかfalseを返すと、ブラウザの送信イベントに伝播されません。
注意すべきことは、ブラウザによってはユーザーがエンターを押したときにフォームの送信をトリガーしないで、代わりにフォームの最初の送信ボタンをトリガーするということです。したがって、それがトリガーされないことを示すためのconsole.log（ 'form submit'）があります。
フォームを送信せずにそれを行うことができます。
たとえば、idが "search"のフォーム送信ボタンが他のフォームにあるとします。その送信ボタンでクリックイベントを呼び出し、その後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
}
送信ボタンを使用せずにフォームのすべての必須フィールドを確認するには、以下の機能を使用できます。
コントロールに必須属性を割り当てる必要があります。
$("#btnSave").click(function () {
$(":input[required]").each(function () {
var myForm = $('#form1');
if (!$myForm[0].checkValidity())
{
$(myForm).submit();
}
});
});
以下のコードは私のために働く、
$("#btn").click(function () {
if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()
});
これにより、フォーム検証を使用してネイティブの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です。
希望は誰かを助けます。
この方法は私にはうまくいきます。
onSubmitにform属性を追加します。値にreturnを含めることを忘れないでください。<form id='frm-contact' method='POST' action='' onSubmit="return contact()">機能を定義します。
function contact(params) { $.ajax({ url: 'sendmail.php', type: "POST", dataType: "json", timeout: 5000, data: { params:params }, success: function (data, textStatus, jqXHR) { // callback }, error: function(jqXHR, textStatus, errorThrown) { console.log(jqXHR.responseText); } }); return false; }
これは、HTML 5に任意のフォームの検証を実行させながら、フォームを現代のJSが制御するという、非常に直接的な方法です。唯一の注意点は、送信ボタンが<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...
}
私はこれがすでに答えられていることを知っています、しかし私は別の可能な解決策があります。
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>
$(document).on("submit", false);
submitButton.click(function(e) {
if (form.checkValidity()) {
form.submit();
}
});
質問によれば、html5の妥当性は最初にjQueryを使用して検証可能である必要があり、ほとんどの回答ではこれは発生していません。この理由は次のとおりです。
html5フォームのデフォルト関数を使用して検証中
checkValidity();// returns true/false
jQueryがオブジェクト配列を返すことを理解する必要がありますが、このように選択します
$("#myForm")
したがって、checkValidity（）関数を機能させるには、最初のインデックスを指定する必要があります
$('#myForm')[0].checkValidity()
完全なソリューションは次のとおりです。
<button type="button" name="button" onclick="saveData()">Save</button>
function saveData()
{
if($('#myForm')[0].checkValidity()){
$.ajax({
type: "POST",
url: "save.php",
data: data,
success: function(resp){console.log("Response: "+resp);}
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<label><input type="radio" id="click_radio" value="click">click</label>
</div>
<div class="row">
<div class="col-md-8" id="person_form">
<form>
<fieldset>
<p><strong>pick your colour</strong></p>
<div class="row">
<div class="col-md-4 form-group">
<label>color</label>
<select class="form-control" id="list1"></select>
</div>
<div class="col-md-4 form-group">
<label>sports</label>
<select class="form-control" id="list2"></select>
</div>
<div class="col-md-4 form-group">
<label>books</label>
<select class="form-control" id="list3"></select>
</div>
</div>
<div class="row">
<div class="col-md-6" >
<label class="col-md-12">name</label>
<input type="text" class="col-md-12 form-control" id="name">
<p id="nameerror"> This field is required</p>
</div>
<div class="col-md-6">
<label>phone number</label>
<input type="text" class="col-md-12 form-control" id="numb">
</div>
</div>
<div class="row">
<button class="btn btn-success pull-right" id="submit" type="submit">go to code</buttn>
</div>
</fieldset>
</form>
</div>
<div class="row second">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<ul id="draglist" class="list-unstyled">
</ul>
</div>
<div class="col-md-6">
<ul id="droplist" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<button class="btn btn-success pull-right" id="submitList">Submit</button>
</div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>You have successfully completed the application!!!</p>
</div>
<div class="modal-footer footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 pull-right">
<h1>Benefits</h1>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
最善のアプローチだと思う
jQuery Validation フォームを検証するためのベストプラクティスを使用するプラグインを使用します。また、ブラウザもサポートしています。そのため、ブラウザの互換性の問題について心配する必要はありません。
また、jQueryの検証 valid（） 関数を使用して、選択したフォームが有効かどうか、またはフォームを送信せずに選択したすべての要素が有効かどうかを確認できます。
<form id="myform">
<input type="text" name="name" required>
<br>
<button type="button">Validate!</button>
</form>
<script>
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
console.log( "Valid: " + form.valid() );
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<title></title>
<style>
.div{
width:100px;
height:100px;
border:1px solid black;
}
#div1{
width:20px;
height:20px;
background: red;
}
#div2{
width:20px;
height:20px;
background: blue;
}
#div3{
width:20px;
height:20px;
background: black;
}
</style>
<script>
var initial="";
function allowDrop(e)
{
e.preventDefault();
}
function drag(e){
e.dataTransfer.setData("div",e.target.id);
}
function drop(e)
{
e.preventDefault();
var data = e.dataTransfer.getData("div");
if(initial=="")
{
initial = $("#"+data);
e.target.appendChild($("#"+data)[0]);
}else{
$("#draghere").append(initial);
e.target.appendChild($("#"+data)[0]);
initial = $("#"+data);
}
}
// function drop(e)
// {
// e.preventDefault();
// var data = e.dataTransfer.getData("div");
// e.target.appendChild($("#"+data)[0]);
// }
$(document).ready(function(){
});
</script>
</head>
<body>
<div class="div" id="draghere" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="item" id="div1" draggable="true" ondragstart="drag(event)">
</div>
<!-- <div class="item" id="div2" draggable="true" ondragstart="drag(event)">
</div>
<div class="item" id="div3" draggable="true" ondragstart="drag(event)">
</div> -->
</div>
<div class="div" id="draghere1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<input type="text" name="asfa" id="tt" maxlength="10" onkeypress="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45" onpaste="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45">
</body>
</html>
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
最良の答えではありませんが、私のために働きます。
$(document).ready(function () {
var obj = {};
$("#click_radio").click(function () {
//Function to get the dropdown list using AJAX
$.ajax({
type: "get",
url: "json/droplist1.json",
dataType: "json",
success: function (res) {
populateDropDown1(res)
}
})
$.ajax({
type: "get",
url: "json/droplist2.json",
dataType: "json",
success: function (res) {
populateDropDown2(res)
}
})
$.ajax({
type: "get",
url: "json/droplist3.json",
dataType: "json",
success: function (res) {
populateDropDown3(res)
}
})
//Internal function to populate the dropdown list
function populateDropDown1(data) {
$.each(data, function (index, val) {
$("#list1").append('<option key=' + val.key + '>' + val.value + '</option>');
});
}
function populateDropDown2(data) {
$.each(data, function (index, val) {
$("#list2").append('<option key=' + val.key + '>' + val.value + '</option>');
});
}
function populateDropDown3(data) {
$.each(data, function (index, val) {
$("#list3").append('<option key=' + val.key + '>' + val.value + '</option>');
});
}
$('#person_form').show();
})
$("#submit").click(function (e) {
e.preventDefault();
var namefl = 0, numbf = 0;
var namef = $("#name").val();
var phnenumb = $("#numb").val();
var list11 = $("#list1").val();
var list12 = $("#list2").val();
var list13 = $("#list3").val();
localStorage.setItem('name', $("#name").val());
localStorage.setItem('number', $("#numb").val());
localStorage.setItem('list11', $("#list1").val());
localStorage.setItem('list12', $("#list2").val());
localStorage.setItem('list13', $("#list3").val());
if (namef.length < 2 || namef.length > 15) {
$("#nameerror").show();
namefl = 0;
}
else {
namefl = 1;
$("#nameerror").hide();
}
// if(phnenumb.length<10 || phnenumb.isNaN()){
// $("#name").addClass('error');
// }
// else{
// $("#name").removeClass('error');
// }
if (namefl == 1) {
$("#person_form").load("partials.html");
}
$.ajax({
type: "get",
dataType: "json",
url: "json/drag_droplist.json",
success: function (res) {
populateSecondPageList(res);
}
})
})
//populate data in the first list box
function populateSecondPageList(result) {
$.each(result, function (index, value) {
$("#draglist").append('<li draggable="true" ondragstart="drag(event)" id="drag' + index + '" class="list-item"><span class="key">' + value.key + ' </span><span class="value">' + value.value + '</span></li>');
})
}
$(document).on("click", "#submitList", function () {
var namef = localStorage.getItem('name');
var numb = localStorage.getItem('number');
var list1f = localStorage.getItem('list11');
var list2f = localStorage.getItem('list12');
var list3f = localStorage.getItem('list13');
var dropname = localStorage.setItem('drpval', sampleData.value);
var dropnam = localStorage.getItem('drpval');
var obj = { namef, numb, list1f, list2f, list3f, dropnam };
console.log(obj);
$.ajax({
type: "POST",
data: obj,
dataType: "json",
url: "https://reqres.in/api/users",
success: function (result) {
$("#myModal").modal('show');
$('#myModal .modal-body').html("<p>" + obj.namef + "</p> <p> " + obj.numb + "</p><p>" + obj.list1f + "</p><p>" + obj.list2f + "</p><p>" + obj.list3f + "</p><p>" + obj.dropnam + "</p>");
},
error: function (result) {
alert('error');
console.log(result);
}
});
})
});
//drag and drop
var dragleave = "";
var sampleData = {};
function allowDrop(ev) {
ev.preventDefault();
ev.target.innerHTML = "";
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
$(".list-unstyled li").css("display", "block");
ev.preventDefault();
// console.log(ev.target);
var data = ev.dataTransfer.getData("text");
// console.log(document.getElementById(data));
ev.target.innerHTML = document.getElementById(data).innerHTML;
$(".list-unstyled #" + data).css("display", "none");
//console.log($("#"+data).html());
if ($("#" + data).html()) {
sampleData = { "key": $("#" + data + " .key").html(), "value": $("#" + data + " .value").html() };
}
}