web-dev-qa-db-fra.com

Attribut requis ne fonctionne pas dans le navigateur Safari

J'ai essayé le code suivant pour créer le champ requis pour notifier le champ requis mais cela ne fonctionne pas dans le navigateur Safari

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

Au-dessus du code fonctionnent dans Firefox. http://jsfiddle.net/X8UXQ/179/

Pouvez-vous me faire savoir le code javascript ou tout autre problème? suis nouveau en javascript

Merci

htmlhtml5safari
40
Maninblack

Safari, jusqu'à la version 10.1 du 26 mars 2017, ne prend pas en charge cet attribut, vous devez utiliser JavaScript.

Cette page contient une solution hacky, qui devrait ajouter la fonctionnalité souhaitée: http://www.html5rocks.com/fr/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);

Vous pouvez remplacer l'alerte par une sorte d'avertissement moins laid, comme afficher une DIV avec un message d'erreur:

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

et en CSS:

.hidden {
    display: none;
}

et en HTML:

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

Le seul inconvénient de cette approche est qu’elle ne gère pas les données exactes à renseigner. Cela nécessiterait une boucle sur toutes les entrées du formulaire et la vérification de la valeur (et mieux, vérifiez la présence d'attribut "obligatoire"). 

La boucle peut ressembler à ceci:

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

Si vous utilisez jQuery, le code ci-dessous est bien meilleur. Il suffit de mettre ce code en bas du fichier jquery.min.js et cela fonctionne pour chaque formulaire.

Il suffit de mettre ce code sur votre fichier .js commun et d’intégrer après ce fichier jquery.js ou 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;
});

Ce code fonctionne avec les navigateurs qui ne prennent pas en charge l'attribut required (html5)

Avoir un jour de codage Nice amis.

34
Roni

J'ai eu le même problème avec Safari et je ne peux que vous demander de jeter un coup d'œil à Webshim !

J'ai trouvé les solutions pour cette question et pour cette une très très utile, mais si vous voulez "simuler" la validation d'entrée native HTML5 pour Safari, Webshim vous fait gagner beaucoup de temps.

Webshim fournit des "mises à niveau" pour Safari et l’aide à gérer des tâches telles que le datepicker HMTL5 ou la validation de formulaire. Ce n’est pas seulement facile à mettre en oeuvre, mais aussi assez beau pour l’utiliser tout de suite.

Réponse également utile sur SO pour la configuration initiale de Webshim ici ! Copie du poste lié:

Pour le moment, Safari ne prend pas en charge l'attribut d'entrée "obligatoire". http://caniuse.com/#search=required

Pour utiliser l'attribut "requis" sur Safari, vous pouvez utiliser "webshim"

1 - Téléchargez la webshim

2 - Mettez ce code:

<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

J'ai construit une solution en plus de celle de @Roni .

Il semble que Webshim est deprecating car il ne sera pas compatible avec jquery 3.0.

Il est important de comprendre que Safari valide l'attribut requis. La différence est ce qu'il fait avec ça. Au lieu de bloquer la soumission et d'afficher une info-bulle de message d'erreur à côté de l'entrée, elle laisse simplement le flux de formulaire se poursuivre.

Cela dit, checkValidity () est implémenté dans Safari et nous renvoie false si un fichier requis n'est pas rempli.

Donc, afin de "réparer" et aussi d'afficher un message d'erreur avec une intervention minimale (pas de Div supplémentaire pour contenir des messages d'erreur) ni de bibliothèque supplémentaire (sauf jQuery, mais je suis sûr que cela peut être fait en javascript pur.)., a obtenu ce petit bidouillage en utilisant l’espace réservé pour afficher les messages d’erreur standard.

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

J'ai trouvé une excellente entrée de blog avec une solution à ce problème. Cela résout le problème d'une manière qui me convient mieux et offre une meilleure expérience utilisateur que les autres suggestions présentées ici. Cela changera la couleur de fond des champs pour indiquer si la saisie est valide ou non.

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

Crédit: http://blueashes.com/2013/web-development/html5-form-validation-fallback/

(Remarque: j'ai étendu le CSS à partir de la publication pour couvrir textarea et sélectionner des champs)

3
Bryce

Le nouveau Safari 10.1 publié le 26 mars 2017 prend désormais en charge l'attribut "obligatoire".

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

2
fernanDOTdo

J'utilise cette solution et fonctionne bien

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

Vous pouvez ajouter ce gestionnaire d'événements à votre formulaire:

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

Dans chaque fonction (), j'ai trouvé tous les éléments DOM de saisie de texte dans l'ancienne version de PC Safari. Je pense que ce code est utile pour les versions plus récentes sur MAC en utilisant l'objet inputobj ['prpertyname'] pour obtenir toutes les propriétés et valeurs:

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