私は必須フィールドを必須フィールドに通知するためのコードを次のようにしようとしましたが、safariブラウザでは機能しません。コード:
<form action="" method="POST">
<input required />Your name:
<br />
<input type="submit" />
</form>
上記のコードはfirefoxで動作します。 http://jsfiddle.net/X8UXQ/179/
JavaScriptコードまたは回避策を教えてください。 javascriptの新機能
ありがとう
2017年3月26日からバージョン10.1までのSafariは、この属性をサポートしていません。JavaScriptを使用する必要があります。
このページには、目的の機能を追加する必要があるハッキングソリューションが含まれています。 http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari
HTML:
<form action="" method="post" id="formID">
<label>Your name: <input required></label><br>
<label>Your age: <input required></label><br>
<input type="submit">
</form>
JavaScript:
var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
if (!event.target.checkValidity()) {
event.preventDefault(); // dismiss the default functionality
alert('Please, fill the form'); // error message
}
}, false);
エラーメッセージでDIVを表示するように、アラートをある種の見苦しい警告に置き換えることができます。
document.getElementById('errorMessageDiv').classList.remove("hidden");
cSSで:
.hidden {
display: none;
}
およびHTMLで:
<div id="errorMessageDiv" class="hidden">Please, fill the form.</div>
このアプローチの唯一の欠点は、入力する必要がある正確な入力を処理しないことです。フォーム内のすべての入力でループを実行し、値をチェックする必要があります(さらに、「必須」属性が存在するかどうかをチェックします)。
ループは次のようになります。
var elems = form.querySelectorAll("input,textarea,select");
for (var i = 0; i < elems.length; i++) {
if (elems[i].required && elems[i].value.length === 0) {
alert('Please, fill the form'); // error message
break; // show error message only once
}
}
JQueryを使用する場合、以下のコードの方がはるかに優れています。このコードをjquery.min.jsファイルの最後に置くだけで、すべてのフォームで機能します。
このコードを共通の.jsファイルに配置し、このファイルjquery.jsまたはjquery.min.jsの後に埋め込むだけです。
$("form").submit(function(e) {
var ref = $(this).find("[required]");
$(ref).each(function(){
if ( $(this).val() == '' )
{
alert("Required field should not be blank.");
$(this).focus();
e.preventDefault();
return false;
}
}); return true;
});
このコードは、必須(html5)属性をサポートしないブラウザーで機能します
素敵なコーディングの友達がいます。
私はSafariでも同じ問題を抱えていましたが、皆さんに Webshim !
この質問とこれに対する解決策を見つけました one 非常に便利ですが、SafariのネイティブHTML5入力検証を「シミュレート」したい場合、Webshimは時間を大幅に節約します。
WebshimはSafariにいくつかの「アップグレード」を提供し、HMTL5の日付ピッカーやフォームの検証などの処理を支援します。実装が簡単なだけでなく、すぐに使用するのに十分なように見えます。
Webshimの初期設定のためのSOの便利な回答 here !リンクされた投稿のコピー:
現時点では、Safariは「必須」入力属性をサポートしていません。 http://caniuse.com/#search=required
Safariで「必須」属性を使用するには、「webshim」を使用できます
1-webshimのダウンロード
2-このコードを入れてください:
<head>
<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
webshim.activeLang('en');
webshims.polyfill('forms');
webshims.cfg.no$Switch = true;
</script>
</head>
@ Roni のソリューションの上にソリューションを構築しました。
Webshimはjquery 3.0と互換性がないため、 非推奨 のようです。
Safariが必須属性を検証することを理解することが重要です。違いは、それが何をするかです。送信をブロックして、入力の横にエラーメッセージのツールチップを表示する代わりに、フォームフローを続行します。
そうは言っても、checkValidity()はSafariに実装されており、必要なファイルが満たされていない場合はfalseを返します。
したがって、「修正」し、最小限の介入でエラーメッセージを表示するため(エラーメッセージを保持するための追加のDivはありません)、追加のライブラリはありません(jQueryを除きますが、プレーンJavaScriptで実行できると確信しています)。プレースホルダーを使用して標準的なエラーメッセージを表示する小さなハックを取得しました。
$("form").submit(function(e) {
if (!e.target.checkValidity()) {
console.log("I am Safari"); // Safari continues with form regardless of checkValidity being false
e.preventDefault(); // dismiss the default functionality
$('#yourFormId :input:visible[required="required"]').each(function () {
if (!this.validity.valid) {
$(this).focus();
$(this).attr("placeholder", this.validationMessage).addClass('placeholderError');
$(this).val(''); // clear value so it shows error message on Placeholder.
return false;
}
});
return; // its invalid, don't continue with submission
}
e.preventDefault(); // have to add it again as Chrome, Firefox will never see above
}
この問題を解決する素晴らしいブログエントリを見つけました。ここで説明する他の提案よりも快適であり、ユーザーエクスペリエンスが向上するように解決します。入力が有効かどうかを示すために、フィールドの背景色を変更します。
CSS:
/* .invalid class prevents CSS from automatically applying */
.invalid input:required:invalid {
background: #BE4C54;
}
.invalid textarea:required:invalid {
background: #BE4C54;
}
.invalid select:required:invalid {
background: #BE4C54;
}
/* Mark valid inputs during .invalid state */
.invalid input:required:valid {
background: #17D654 ;
}
.invalid textarea:required:valid {
background: #17D654 ;
}
.invalid select:required:valid {
background: #17D654 ;
}
JS:
$(function () {
if (hasHtml5Validation()) {
$('.validate-form').submit(function (e) {
if (!this.checkValidity()) {
// Prevent default stops form from firing
e.preventDefault();
$(this).addClass('invalid');
$('#status').html('invalid');
}
else {
$(this).removeClass('invalid');
$('#status').html('submitted');
}
});
}
});
function hasHtml5Validation () {
return typeof document.createElement('input').checkValidity === 'function';
}
クレジット: http://blueashes.com/2013/web-development/html5-form-validation-fallback/
(注:テキストエリアをカバーし、フィールドを選択するために、投稿からCSSを拡張しました)
2017年3月26日にリリースされた新しいSafari 10.1では、「必須」属性がサポートされるようになりました。
私はこのソリューションを使用し、正常に動作します
$('#idForm').click(function(e) {
e.preventDefault();
var sendModalForm = true;
$('[required]').each(function() {
if ($(this).val() == '') {
sendModalForm = false;
alert("Required field should not be blank."); // or $('.error-message').show();
}
});
if (sendModalForm) {
$('#idForm').submit();
}
});
このイベントハンドラーをフォームに追加できます。
// Chrome and Firefox will not submit invalid forms
// so this code is for other browsers only (e.g. Safari).
form.addEventListener('submit', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
var inputFields = form.querySelectorAll('input');
for (i=0; i < inputFields.length; i++) {
if (!inputFields[i].validity.valid) {
inputFields[i].focus(); // set cursor to first invalid input field
return false;
}
}
}
}, false);
Each()関数内で、古いバージョンのPC Safariのテキスト入力のすべてのDOM要素を見つけました。このコードは、inputobj ['prpertyname']オブジェクトを使用してすべてのプロパティと値を取得するMACの新しいバージョンに役立ちます。
$('form').find("[required]").each(function(index, inputobj) {
if (inputobj['required'] == true) { // check all required fields within the form
currentValue = $(this).val();
if (currentValue.length == 0) {
// $.each((inputobj), function(input, obj) { alert(input + ' - ' + obj); }); // uncomment this row to alert names and values of DOM object
var currentName = inputobj['placeholder']; // use for alerts
return false // here is an empty input
}
}
});
function customValidate(){
var flag=true;
var fields = $('#frm-add').find('[required]'); //get required field by form_ID
for (var i=0; i< fields.length;i++){
debugger
if ($(fields[i]).val()==''){
flag = false;
$(fields[i]).focus();
}
}
return flag;
}
if (customValidate()){
// do yor work
}