Erforderliches Attribut Funktioniert nicht im Safari-Browser

Ich versucht habe folgenden code für das gewünschte Feld zu Benachrichtigen, die die erforderlichen Feld-aber es funktioniert nicht im safari-browser.
Code:

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

Oben der code funktioniert in firefox. http://jsfiddle.net/X8UXQ/179/

Können Sie lassen Sie mich wissen, die javascript-code oder irgendeinen workarround? bin neu in javascript

Dank

Kommentar zu dem Problem - Öffnen

Möglich, Duplikat der Safari ist nicht die Anerkennung der "required" - Attribut. Wie um es zu beheben? Kommentarautor: tommygun

InformationsquelleAutor der Frage Maninblack | 2014-04-24

37

Safari nicht unterstützt dieses Attribut verwenden, benötigen Sie JavaScript. Diese Seite enthält einen hacky Lösung, die Sie sollte hinzufügen, die gewünschte Funktionalität:

http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari

HTML:
```
<form action="" method="POST" id="formID">
    Your name: <input  required = "true"/>
    <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);
```
Können Sie ersetzen Sie die Warnung mit irgendeiner Art von weniger hässliche Warnung, zeigen, wie ein DIV mit der Fehlermeldung:
```
document.getElementById('errorMessageDiv').style.display = 'block';
```
und im HTML-Format:
```
<div id="errorMessageDiv" style="display:block;">Please, fill the form.</div>
```
(den Inhalt von style-Attribut sollte in CSS-Datei)

Der einzige Nachteil dieses Ansatzes ist es nicht, behandeln Sie die genaue Eingabe, die gefüllt werden muss. Es würde eine Schleife über alle Einträge im Formular und überprüfen Sie den Wert (und besser, das Häkchen für "erforderlich" - Attribut Präsenz).

InformationsquelleAutor der Antwort mikiqex
34

Wenn du mit jQuery dann unten der code ist viel besser. Setzen Sie einfach diesen code unten in der jquery.min.js Datei und es funktioniert für jeden und in jeder form.

Setzen Sie einfach diesen code auf Ihrer gemeinsamen .js-Datei und einbetten nach dieser Datei jquery.js oder 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;
});
```
Dieser code funktioniert mit die browser, die nicht die gewünschte Unterstützung (html5) Attribut

Haben einen schönen coding-Tag Freunde.

InformationsquelleAutor der Antwort Roni
13

Ich hatte das gleiche problem mit Safari und kann ich nur bitte Sie, alle einen Blick auf Webshim!

Fand ich die Lösungen für diese Frage und für diese ein sehr nützlich, aber wenn Sie wollen, zu "simulieren" native HTML5-input-Validierung für Safari, Webshim spart Ihnen eine Menge Zeit.

Webshim liefert einige "upgrades" für Safari und es hilft, um Dinge zu handhaben wie die HMTL5 datepicker oder die Formular-Validierung. Es ist nicht nur einfach zu implementieren, aber das sieht auch gut genug, nur verwenden es sofort.

Auch nützlich Antwort auf SO für die erste Einrichtung für webshim hier! Kopie des verlinkten post:

Zu diesem Zeitpunkt, Safari bietet keine Unterstützung für die "erforderlichen" input-Attribut. http://caniuse.com/#search=required

Zur Nutzung der "erforderlich" - Attribut auf "Safari", können Sie 'webshim'

1 - Download webshim

2 - Setzen Sie diesen code ein :
```
<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>
```
InformationsquelleAutor der Antwort tommygun
5

Ich gebaut habe, eine Lösung auf der Oberseite des @Roni 's ein.

Scheint es Webshim ist abwertend, da es nicht kompatibel mit jquery 3.0.

Ist es wichtig zu verstehen, dass Safari nicht validieren das erforderliche Attribut. Der Unterschied ist, was es mit ihm macht. Anstatt die Blockierung der Vorlage und zeigt eine Fehlermeldung tooltip neben dem Eingang, lassen Sie einfach das Formular Fluss weiter.

Dass gesagt wird, die checkValidity() ist implementiert in Safari und macht gibt uns false, wenn eine erforderliche eingereicht, ist nicht erfüllt.

So, in Reihenfolge zu "fix it" und zeigt auch eine Fehlermeldung mit minimalem Eingriff (kein extra Div ' s für die Abhaltung von Fehlermeldungen) und keine extra Bibliothek (außer jQuery, aber ich bin sicher, dass es getan werden kann, in plain javascript)., Ich hab diesen hack mit dem Platzhalter, um zu zeigen, standard-Fehlermeldungen.
```
$("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
}
```
InformationsquelleAutor der Antwort Juliomac

Fand ich einen tollen blog-Eintrag mit einer Lösung für dieses problem. Er löst es auf eine Weise, die ich bin bequem mit und bietet eine bessere user experience als die anderen Vorschläge hier. Es wird ändern Sie die Hintergrundfarbe der Felder zu bezeichnen, wenn die Eingabe gültig ist oder nicht.

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';
}

Credit: http://blueashes.com/2013/web-development/html5-form-validation-fallback/

(Hinweis: ich hatte erweitern die CSS von der post zu decken, textarea-und select-Felder)

InformationsquelleAutor der Antwort Bryce

Ich diese Lösung verwenden und funktioniert einwandfrei

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

InformationsquelleAutor der Antwort jamogon

Können Sie fügen Sie diese Ereignisprozedur zu einem Formular -:

//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);

InformationsquelleAutor der Antwort Matthias Bohlen

Innerhalb von each () - Funktion habe ich gefunden, alle DOM-element der text-Eingabe in der alten version der PC Safari, ich denke, dass dieser code nützlich für neuere Versionen auf dem MAC mit inputobj['prpertyname'] - Objekt, um alle Eigenschaften und Werte:

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

InformationsquelleAutor der Antwort Leslie

1

Den neuen Safari 10.1 veröffentlicht am 26 Mar, 2017, unterstützt jetzt die "required" - Attribut.

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

InformationsquelleAutor der Antwort fernanDOTdo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.