Bonjour,

Je débute en javascript. En m'exerçant, j'ai fait un formulaire en plusieurs étapes, et j'essaie de faire valider mon dernier formulaire qui comporte des checkbox.

Je dois faire au moins un choix, et ce que j'aimerais, c'est que si je ne valide pas le formulaire, la case à cocher soit en rouge.

J'ai réussi pour les autres formulaire, mais pas pour ce dernier.

Voici mon code:
JS:

if(input.css('border-color')==='rgb(255, 0, 0)'){
      input.css('border-color','green');
    }
    if(!input.val() && input.attr('id') && input.attr('type')!=='hidden'){
        input.css('border-color','red');
        return;
    }
  }
  var selects = $('.fields select');
  for(var i = 0; i < selects.length; i++){
    var input = $(selects[i]);
    if(input.css('border-color')==='rgb(255, 0, 0)'){
      input.css('border-color','green');
    }
    var element = "#"+input.attr('id')+" option:selected";
    var id = $(element).index();
    if(!id && input.attr('id')){
        input.css('border-color','red');
        return;
    }
  }
};
 
var validateEmail = function(email){
  //if(email.includes(' ')){return false};
  //if(!email.includes('@')){return false};
  //return true;
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
  // Appel API vérificateur de mail
}
 
var validateForm = function(form){
  if ((form.choix[0].checked == false) && (form.choix[1].checked == false)){return false;}
}

mon html :

<form>
<div class="lp-pom-form-field checkbox-group multi-group" id="container_choix">
<div class="ub-input-item input-wrap optionsList" id="group_choix">
<div class="option" id="ub-option-choix-item-0">
    <input type="checkbox" value="Par mail" id="choix_par_mail" name="choix" class="checkbox form-builder-checkbox-input form_elem_choix">
    <label for="choix_par_mail" class="opt-label form-builder-checkbox-label"><span class="label-style">Par mail</span></label>
</div>
<div class="option" id="ub-option-choix-item-1">
    <input type="checkbox" value="Par Messenger" id="choix_par_messenger" name="choix" class="checkbox form-builder-checkbox-input form_elem_choix">
    <label for="choix_par_messenger" class="opt-label form-builder-checkbox-label"><span class="label-style">Par Messenger</span></label>
</div>
<div class="option" id="ub-option-choix-item-2">
    <input type="checkbox" value="Par SMS" id="choix_par_sms" name="choix" class="checkbox form-builder-checkbox-input form_elem_choix">
    <label for="choix_par_sms" class="opt-label form-builder-checkbox-label"><span class="label-style">Par SMS</span></label>
</div>
</div>
</div>
</form>

Si quelqu'un aurait une piste ou un moyen pour que je puisse avancer s'il vous plaît :)

Je vous remercie d'avance pour vos réponses !

1 réponse


Salut

if(input.css('border-color')==='rgb(255, 0, 0)'){
      input.css('border-color','green');
    }
    if(!input.val() && input.attr('id') && input.attr('type')!=='hidden'){
        input.css('border-color','red');
        return;
    }
  }  <<<<-------- en trop
  var selects = $('.fields select');
  for(var i = 0; i < selects.length; i++){
    var input = $(selects[i]);
    if(input.css('border-color')==='rgb(255, 0, 0)'){
      input.css('border-color','green');
    }
    var element = "#"+input.attr('id')+" option:selected";
    var id = $(element).index();
    if(!id && input.attr('id')){
        input.css('border-color','red');
        return;
    }
  }    <<<<----- et celui là ???
}   <<<<------- ????????

une simple indentation respecté aurai montré ce bug !!!

le ba ba quoi :D

@pluche

Pierre