Har en enkät med massa frågot som är blandat textfält, radio och checkbox.
Vill du validera detta och att man måste fyllt i minst ett alternativ på varje. Checkbox kan man fylla i fler. Men behöver nu hjälp med detta. Min javascriptkod ser ut så här men hur skriver jag för radio + checkboxarna?
<script language="javaScript">
function Check() {
if (document.enkat.namn.value==""){
alert("Du glömde skriva ditt namn!");
return false;
} else if (document.enkat.foretag.value==""){
alert("Du glömde ditt företagsnamn!");
return false;
} else if (document.enkat.adress.value==""){
alert("Du glömde adress!");
return false;
} else if (document.enkat.postnr.value==""){
alert("Du glömde postnummer!");
return false;
} else if (document.enkat.postort.value==""){
alert("Du glömde ort!");
return false;
} else if (document.enkat.telefon.value==""){
alert("Du glömde telefonnummer!");
return false;
} else if (document.enkat.checkbox1.value==""){
alert("Du glömde checkbox 1!");
return false;
} else if (document.enkat.checkbox2.value==""){
alert("Du glömde checkbox 2!");
return false;
} else if (document.enkat.radio1.value==""){
alert("Du glömde radio 1!");
return false;
} else if (document.enkat.radio2.value==""){
alert("Du glömde radio 2!");
return false;
}
}
</script>
Jag skulle rekommendera jQuery för att slippa problem med olika webbläsare.
Denna sida återkommer jag till när jag får problem med radiobuttons och checkboxar med jQuery: http://jquery.open2space.com/node/15
Lite kommentarer... Konstruktionen errors[errors.length] = "felet"; kan du byta ut mot errors.push("felet"); som gör samma sak, och i min mening ser snyggare ut.
Du kan lugnt dumpa måsvingarna i checkRadioCheckboxArray om du inte lägger till fler saker till loopen.
Loopen i reportErrors kan du ersätta med en join, men då får du visserligen inte en siffra vid varje föremål, men du kan ändå få ut den totala mängden fel med errors.length.
Dessutom skulle jag personligen lägga längdkontrollen av fel-arrayn i funktionen och returnera true eller false som passas neråt med en till return. som du märker har jag skrivit om if-satsen till if (errors.length) Detta är ett litet trick som går ut på att 0 räknas som false i if-satser.
Och så skulle jag lagt till en trim-funktion så att man inte kan fylla ut med mellanslag före eller efter strängen. Och lägga till en längdkontroll på textfältet så man måste skriva in t ex 5 bokstäver.
Så här ungefär:
<html>
<head>
<title>Check Boxes</title>
<script type="text/javascript">
String.prototype.trim=function(){
return this.replace(/^\s+/, "").replace(/\s+$/, "");
}
function validate(form){
var errors = [];
if ( !checkRadioCheckboxArray(form.fraga_1) ) {
errors.push("Du måste välja något på fråga 1!");
}
if ( !checkRadioCheckboxArray(form.fraga_2) ) {
errors.push("Du måste välja något på fråga 2!");
}
if (form.fraga_3.value.trim().length < 5) {
errors.push("Du måste skriva minst 5 tecken!");
}
return reportErrors(errors);
}
function checkRadioCheckboxArray(valen){
for (var i=0; i < valen.length; i++)
if (valen[i].checked)
return true;
return false;
}
function reportErrors(errors){
var msg = "Du har missat fylla i...\n", sep = "\n -";
if (errors.length) {
msg += sep + errors.join(sep) + "\n\nTotalt " + errors.length + " fel";
alert(msg);
return false;
}else
return true;
}
</script>
</head>
<body>
<h1>Ice Cream Form</h1>
<form method="post" action="Process.html" onsubmit="return validate(this);">
<p><b>Fråga 1</b>
<input type="radio" name="fraga_1" value="cup"> Cup
<input type="radio" name="fraga_1" value="plaincone"> Plain cone
<input type="radio" name="fraga_1" value="sugarcone"> Sugar cone
<input type="radio" name="fraga_1" value="wafflecone"> Waffle cone
</p>
<p>
<b>Fråga 2:</b>
<input type="checkbox" name="fraga_2" value="cup"> Cup
<input type="checkbox" name="fraga_2" value="plaincone"> Plain cone
<input type="checkbox" name="fraga_2" value="sugarcone"> Sugar cone
<input type="checkbox" name="fraga_2" value="wafflecone"> Waffle cone
</p>
<p>
<b>Special Requests:</b><br>
<textarea name="fraga_3" cols="40" rows="6" wrap="virtual" onblur="checkTextArea(this, 100);"></textarea>
</p>
<input type="submit" value="Place Order">
</form>
</body>
</html>
