web-dev-qa-db-ja.com

Safariブラウザーで必要な属性が機能しない

私は必須フィールドを必須フィールドに通知するためのコードを次のようにしようとしましたが、safariブラウザでは機能しません。コード：

 <form action="" method="POST">
        <input  required />Your name:
        <br />
        <input type="submit" />
    </form>

上記のコードはfirefoxで動作します。 http://jsfiddle.net/X8UXQ/179/

JavaScriptコードまたは回避策を教えてください。 javascriptの新機能

ありがとう

htmlhtml5safari
40
Maninblack

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
    }
}
38
mikiqex

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）属性をサポートしないブラウザーで機能します

素敵なコーディングの友達がいます。

34
Roni

私は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>
14
tommygun

@ 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
}
5
Juliomac

この問題を解決する素晴らしいブログエントリを見つけました。ここで説明する他の提案よりも快適であり、ユーザーエクスペリエンスが向上するように解決します。入力が有効かどうかを示すために、フィールドの背景色を変更します。

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を拡張しました）

3
Bryce

2017年3月26日にリリースされた新しいSafari 10.1では、「必須」属性がサポートされるようになりました。

http://caniuse.com/#search=required

2
fernanDOTdo

私はこのソリューションを使用し、正常に動作します

$('#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();
    }
});
2
jamogon

このイベントハンドラーをフォームに追加できます。

// 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);
1
Matthias Bohlen

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
            }
        }
    });
1
Leslie
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
 }
0
Syed Shibli