Aanvullende voorwaarde in drop down

Status
Niet open voor verdere reacties.

Stiftmeister57

Gebruiker
Lid geworden
11 mei 2017
Berichten
10
Hallo,

Ik wil graag als aanvullende voorwaarde toevoegen dat je alleen 3 verschillende kleuren kunt invullen in onderstaand formulier:

<label> Naam (verplicht)
[text* your-name] </label>

<label> E-mailadres (verplicht)
[email* your-email] </label>

<label> Rekeningnummer (verplicht)
[text* your-accountnr minlength:18 maxlength:18] </label>

Kleur 1
[select* Kleur1 include_blank "Rood" "Blauw" "Groen"]
Kleur 2
[select* Kleur2 include_blank "Rood" "Blauw" "Groen"]
Kleur 3
[select* Kleur3 include_blank "Rood" "Blauw" "Groen"]

[submit "Verzenden"]

Wie helpt mij? Ik kom er nl. zelf niet uit :-(
 
Kan je wat uitleg geven over wat je wilt bereiken? Misschien kan het wel veel beter.
 
De bedoeling is dat men zich inschrijft en dan aangeeft wat de favoriete kleur is, waarbij kleur 1 het meest gewenst is. Gezien de beperkte beschikbaarheid kleuren is het noodzakelijk dat iedereen 3 verschillende kleuren opgeeft.
 
Heeft iemand een oplossing voor bovenstaand vraagstuk? Ik zou er echt enorm mee geholpen zijn!!
 
Het nadeel is dat een serverside validatie lastig te integreren is in een bestaande formbuilder. Misschien kan je er via een 'hook' een functie aan koppelen. Maar dat is toch iets dat je in de manual moet zoeken.
 
Een simpele en doeltreffende validatie aan de browserzijde. Maar het is beter om dit serverside af te handelen.
Code:
<form id="form1" method="post" action="index.php">
   <label for="naam">Naam *
      <input type="text" id="naam" name="form1_naam" placeholder="Uw naam" />
   </label>
   <label for="email">E-mailadres *
      <input type="text" id="email" name="form1_email" placeholder="Uw e-mailadres" />
   </label>
   <label for="rekening">Rekeningnummer *
      <input type="text" id="rekening" name="form1_rekening" placeholder="Bankrekening zonder spaties" />
   </label>
   <label for="kleur1">Kleur 1 *
      <select name="kleur1" id="kleur1" name="form1_kleur1">
      <option value="">--keuze--</option><option value="Rood">Rood</option>
      <option value="Groen">Groen</option><option value="Blauw">Blauw</option>
      </select>
   </label>
   <label for="kleur2">Kleur 2 *
      <select name="kleur2" id="kleur2" name="form1_kleur2">
      <option value="">--keuze--</option><option value="Rood">Rood</option>
      <option value="Groen">Groen</option><option value="Blauw">Blauw</option>
      </select>
   </label>
   <label for="kleur3">Kleur 3 *
      <select name="kleur3" id="kleur3" name="form1_kleur3">
      <option value="">--keuze--</option><option value="Rood">Rood</option>
      <option value="Groen">Groen</option><option value="Blauw">Blauw</option>
      </select>
   </label>
   <div>
      <input type="submit" id="submit" name="form1_submit" value="Verstuur" disabled="disabled" />
   </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var formset = $("#form1 input, #form1 select");
$(formset).on('keyup mouseup change', function(e) {
   var disab = false;
   formset.each(function() {
      if ($(this).val().trim() == '') disab = true;
   });
   if ($("#kleur1").val() == $("#kleur2").val() || $("#kleur2").val() == $("#kleur3").val() || $("#kleur1").val() == $("#kleur3").val()) {
      disab = true;
   }
   var mailreg = /(.+)@(.+){2,}\.(.+){2,}/;
   var mailval = $("#email").val().replace(/\s/g, '');
   if (!mailreg.test(mailval)) disab = true;
   var bankreg = /^[a-zA-Z]{2}\d{2}[a-zA-Z]{4}\d{10}$/;
   if ( !bankreg.test($("#rekening").val()) ) disab = true;
   $("#submit").prop('disabled', disab);
});
</script>

en in de css de juiste cursor

#submit {
   cursor:pointer;
}
#submit[disabled] {
   cursor:not-allowed;
}
Suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan