it-swarm.com.de

Erforderliches Attribut Funktioniert nicht in Safari Browser

Ich habe folgenden Code ausprobiert, um das erforderliche Feld zu erstellen, um das erforderliche Feld zu benachrichtigen, aber es funktioniert nicht im Safari-Browser.

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

Über dem Code arbeiten Sie in Firefox. http://jsfiddle.net/X8UXQ/179/

Können Sie mir den Javascript-Code oder einen Workarround mitteilen? bin neu in Javascript

Vielen Dank

40
Maninblack

Safari, bis zur Version 10.1 vom 26.03.2017, unterstützt dieses Attribut nicht, Sie müssen JavaScript verwenden.

Diese Seite enthält eine gehackte Lösung, die die gewünschte Funktionalität hinzufügen sollte: http://www.html5rocks.com/de/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);

Sie können die Warnung durch eine weniger hässliche Warnung ersetzen, z. B. ein DIV mit Fehlermeldung anzeigen:

document.getElementById('errorMessageDiv').classList.remove("hidden");

und in CSS:

.hidden {
    display: none;
}

und in HTML:

<div id="errorMessageDiv" class="hidden">Please, fill the form.</div>

Der einzige Nachteil dieses Ansatzes ist, dass er nicht die genaue Eingabe übernimmt, die ausgefüllt werden muss. Es würde eine Schleife über alle Eingaben im Formular und die Überprüfung des Wertes erfordern (und besser die "erforderliche" Anwesenheit von Attributen prüfen). 

Die Schleife kann so aussehen:

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

Wenn Sie mit jQuery gehen, ist der folgende Code viel besser. Fügen Sie diesen Code einfach in die Datei jquery.min.js ein und es funktioniert für jedes Formular.

Fügen Sie diesen Code einfach in Ihre gemeinsame JS-Datei ein und binden Sie nach dieser Datei jquery.js oder jquery.min.js ein 

$("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 dem Browser, der das erforderliche Attribut (html5) nicht unterstützt

Habe einen schönen Coding-Tag, Freunde.

34
Roni

Ich hatte das gleiche Problem mit Safari, und ich kann Sie alle bitten, Webshim anzusehen!

Ich fand die Lösungen für diese Frage und für diese one sehr nützlich, aber wenn Sie die native HTML5-Eingabevalidierung für Safari "simulieren" möchten, spart Ihnen Webshim viel Zeit.

Webshim bietet einige "Upgrades" für Safari an und hilft dabei, Dinge wie den HMTL5 Datepicker oder die Formularvalidierung zu handhaben. Es ist nicht nur einfach zu implementieren, sondern sieht auch gut genug aus, um es sofort zu verwenden.

Auch nützliche Antwort auf SO für die erstmalige Einrichtung von webshim here ! Kopie der verlinkten Post:

Zurzeit unterstützt Safari das "erforderliche" Eingabeattribut nicht. http://caniuse.com/#search=required

Um das Attribut 'required' in Safari zu verwenden, können Sie 'webshim' verwenden.

1 - webshim herunterladen

2 - Geben 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>
14
tommygun

Ich habe eine Lösung über @Roni gebaut.

Es scheint, dass Webshim abwertend ist, da es nicht mit jquery 3.0 kompatibel ist.

Es ist wichtig zu verstehen, dass Safari das erforderliche Attribut überprüft. Der Unterschied ist, was es damit macht. Anstatt die Übermittlung zu blockieren und neben der Eingabe eine Fehlermeldung anzuzeigen, wird der Formularfluss fortgesetzt.

Die checkValidity () ist jedoch in Safari implementiert und gibt uns false zurück, wenn ein erforderliches Feld nicht erfüllt ist.

Um es zu "beheben" und auch eine Fehlermeldung mit minimalem Eingriff (keine zusätzlichen Div's für das Halten von Fehlermeldungen) und keine zusätzliche Bibliothek (außer jQuery, aber ich bin sicher, dass es in einfachem Javascript gemacht werden kann) anzuzeigen Dieser kleine Hack hat den Platzhalter verwendet, um Standardfehlermeldungen anzuzeigen.

$("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

Ich habe einen großartigen Blogeintrag gefunden, der eine Lösung für dieses Problem bietet. Es löst es auf eine Art und Weise, mit der ich mich wohler fühle und eine bessere Benutzererfahrung bietet als die anderen Vorschläge hier. Dadurch wird die Hintergrundfarbe der Felder geändert, um anzugeben, ob 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';
}

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

(Hinweis: Ich habe das CSS vom Post erweitert, um Textbereiche abzudecken und Felder auszuwählen.)

3
Bryce

Die neue Safari 10.1, die am 26. März 2017 veröffentlicht wurde, unterstützt jetzt das Attribut "required".

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

2
fernanDOTdo

Ich benutze diese Lösung und funktioniert gut

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

Sie können diesen Ereignishandler zu Ihrem Formular hinzufügen:

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

In jeder () - Funktion habe ich alle DOM-Elemente der Texteingabe in der alten Version von PC Safari gefunden. Ich denke, dieser Code ist für neuere Versionen auf MAC mit dem inputobj ['prpertyname'] - Objekt nützlich, um alle Eigenschaften und Werte abzurufen:

    $('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