AsaMedlem sedan dec. 20011 860 inlägg 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>
Kikade lite på denna men fattar int ehur jag lägger till den:
http://www.webforum.nu/showthread.php?t=97843&highlight=validera
Sen fattas ju även checkboxarna då..
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
AsaMedlem sedan dec. 20011 860 inlägg Tackar för det men har aldrig använt jQuery och jag gjorde så här och det verkar funka:
<html>
<head>
<title>Check Boxes</title>
<script type="text/javascript">
function validate(form){
var errors = [];
if ( !checkRadioCheckboxArray(form.fraga_1) ) {
errors[errors.length] = "Du måste välja något på fråga 1!";
}
if ( !checkRadioCheckboxArray(form.fraga_2) ) {
errors[errors.length] = "Du måste välja något på fråga 2!";
}
if (form.fraga_3.value=="") {
errors[errors.length] = "Du måste skriva något!";
}
if (errors.length > 0) {
reportErrors(errors);
return false;
}
return true;
}
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";
var numError;
for (var i = 0; i<errors.length; i++) {
numError = i + 1;
<!--msg += "\n" + numError + ". " + errors[i];-->
msg += "\n - " + errors[i];
}
alert(msg);
}
</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>
Klart det går att lösa. Fungerar det i "alla" webbläsare också?
AsaMedlem sedan dec. 20011 860 inlägg Har testat Firefox 3, Internet Explorer 8, Safari 4 för Windows och Google chrome 2.
Skulle rekommendera att iallafall testa Internet Explorer 6 & 7 samt Safari 3.
Opera är också ganska vanlig.
AsaMedlem sedan dec. 20011 860 inlägg Jag har inte de webbläsarna på någon dator. Kan du testa? Har du möjlighet till det?
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>
AsaMedlem sedan dec. 20011 860 inlägg Tackar för det och jag ska testa och återkommer och accepterar slutgiltiga svaret då.
