web-dev-qa-db-fra.com

Validation Javascript pour tous les champs avec l'attribut Required

J'ai cherché haut et bas la réponse à cette question, mais je ne la trouve nulle part.

J'ai un formulaire qui a les attributs HTML 'requis' et il met en valeur les champs à renseigner avant la soumission ... ou le ferait, mais le système sur lequel mon formulaire est boulonné (dont j'ai pas de contrôle sur) soumet de toute façon le formulaire après quelques secondes. Il s'appuie sur Javascript pour sa soumission. Par conséquent, j'aimerais écrire un script Javascript pour vérifier tous les champs pour un attribut requis. Actuellement, j'ai un script qui spécifie les champs que je veux être obligatoire, mais s'il pouvait rechercher l'attribut à la place, ce serait génial.

javascripthtml5formsrequired
7
nbren007

Si vous utilisez input [type = submit] , vous n'avez pas besoin de JavaScript.

<form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="submit" name="submit" value="Submit" />  
</form>

Travailler jsBin

Mais si input [type = button] est utilisé pour soumettre le formulaire, utilisez l'extrait de code ci-dessous. 

<form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="button" name="button" value="Submit" />  
</form>

window.onload = function () {
  var form = document.getElementById('theForm');
  form.button.onclick = function (){
    for(var i=0; i < form.elements.length; i++){
      if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
        alert('There are some required fields!');
        return false;
      }
    }
    form.submit();
  }; 
};

Wotking jsBin

14
hex494D49

cela validera tous vos types de champs de formulaire

$('#submitbutton').click(function (e) {
    e.preventDefault();

    var form = document.getElementById("myForm");
    var inputs = form.getElementsByTagName("input"), input = null, select = null, not_pass = false;
    var selects = form.getElementsByTagName("select");
    for(var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];

        if(input.type == "hidden") {

            continue;
        }

        if(input.type == "radio" && !input.checked) {
            not_pass = true;
        } 
        if(input.type == "radio" && input.checked){
            not_pass = false;
            break;
        }

        if(input.type == "text" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "text" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "number" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "number" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "email" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "email" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "checkbox" && !input.checked) {
            not_pass = true;
        } 
        if(input.type == "checkbox" && input.checked) {
            not_pass = false;
            break;
        }
    }

    for(var i = 0, len = selects.length; i < len; i++) {
        select = selects[i];
        if(!select.value) {
            not_pass = true;
            break;
        } 
    }

    if (not_pass) {
        $("#req-message").show();//this div # in your form
        return false;
    } else {
     //do something here 
    }
});
1
Jason Liu