Validera select option

16 svar · 2 387 visningar · startad av emton 2 jan. 2011

emtonMedlem sedan juni 200589 inlägg

2 jan. 2011 16:08#1

Har i ett formulär en select med olika options. Jag vill validera detta så att man måste välja någon av alternativen utom det första som ju är "välj". Hur gör jag då?

<form action="lagg_in_annons.php" onsubmit="return validera()"  method="post" id="annonsform" name="annonsform">
<fieldset>
<legend>Annonsformulär</legend>
<label for="fnamn">* Förnamn:</label><input name="fnamn" id="fnamn" type="text" size="20" /> <div id="hlp1"></div><br />
<label for="enamn">* Efternamn:</label><input name="enamn" id="enamn" type="text" size="20" /><div id="hlp2"></div><br />
<label for="tele">Telefon:</label><input name="tele" id="tele" type="text" size="20" /><br />
<label for="mobil">Mobil:</label><input name="mobil" id="mobil" type="text" size="20" /><br />
<label for="epost">* Epost:</label><input name="epost" id="epost" type="text" size="20" /><div id="hlp3"></div><br />
<label for="ort">Ort:</label><input name="ort" type="text" id="text" size="20" /><br />

<label for="annonstyp">* Välj annonstyp:</label><select name="val" id="val">
   <option value="Välj">
   <option value="saljes">Säljes
   <option value="kopes">Köpes
   <option value="ovrigt">Övrigt
</select><div id="hlp5"></div><br />

<label for="gnr">* Genbanksnr:</label><input name="genbanksnr" id="genbanksnr" type="text" size="10" /><div id="hlp4"></div><br />
<label for="pris">Pris:</label><input name="pris" id="i_pris" type="text" size="20" /><div id="hlp8"></div><br />
<label for="overskrift">* Överskrift:</label><input name="overskrift" id="i_overskrift" type="text" size="20" /><div id="hlp6"></div><br />
<label for="annonstext">* Annonstext:</label><textarea name="annonstext" id="annonstext" cols="30" rows="10"></textarea><div id="hlp7"></div><br />
<input type="hidden" name="date" />
<div id="hlp"></div>
<input name="submit" type="submit" value="Skicka annons" />
</fieldset>
</form>

 function validera()
{
 var bokst=/^([a-zA-Z\-\.\ ])+$/;
 var mail =/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
 var siffror=/^([0-9])+$/;

 if (document.getElementById('fnamn').value.length<1){
	 document.getElementById('hlp1').innerHTML="Skriv ditt förnamn.";
	 return false;
	}
 if (bokst.test(document.getElementById('fnamn').value) == false){
     document.getElementById('hlp1').innerHTML="Namnet får endast bestå av bostäver och (-.).";
     return false;
	}
 if (document.getElementById('enamn').value.length<1){
	 document.getElementById('hlp2').innerHTML="Skriv ditt efternamn.";
	 return false;
	}
 if (bokst.test(document.getElementById('enamn').value) == false){
     document.getElementById('hlp2').innerHTML="Namnet får endast bestå av bostäver och (-.).";
     return false;
	}
 if (document.getElementById('epost').value.length<1){
	 document.getElementById('hlp3').innerHTML="Skriv din Epostadress.";
	 return false;
	}
 if (mail.test(document.getElementById('epost').value) == false){
     document.getElementById('hlp3').innerHTML="Ej giltig epostadress.";
     return false;
	}
 if (document.getElementById('genbanksnr').value.length<1){
	 document.getElementById('hlp4').innerHTML="Du måste uppge ditt genbanksnr.";
	 return false;
	}
 if (siffror.test(document.getElementById('genbanksnr').value) == false){
     document.getElementById('hlp4').innerHTML="Endast siffror.";
     return false;
	}
 if (document.getElementById('val').value.length<1){
	 document.getElementById('hlp5').innerHTML="Du måste välja annonstyp.";
	 return false;
	}
 if (document.getElementById('i_overskrift').value.length<1){
	 document.getElementById('hlp6').innerHTML="Du måste skriva en överskrift.";
	 return false;
	}
 if (document.getElementById('annonstext').value.length<1){
	 document.getElementById('hlp7').innerHTML="Du måste skriva en annonstext.";
	 return false;
	}
}

</script>

noshorninMedlem sedan aug. 2008662 inlägg

2 jan. 2011 16:38#2

if(document.getElementById('val').selectedIndex==0){
    document.getElementById('hlp3').innerHTML="Ej giltig annanstyp.";
    return false;
}

red: ändrade lite

emtonMedlem sedan juni 200589 inlägg

2 jan. 2011 16:57#3

Tack för svar, men den hoppar över denna helt. Som om den anser att den är validerad helt ok. Ska jag kanske ändra något i själva formuläret?

voigtann1Medlem sedan juni 20018 810 inlägg

2 jan. 2011 18:01#4

emton: Ja, gör om ditt formulär, stäng dina option, använd inte block element på det sätt du verkar göra (div är ett block element) så du behöver inte köra med <br /> (om du kör xhtml så validera dina kod), byt till ett inline-element (span exempelvis?)

Skrev om din validering lite, noshornin skrev inte fel på sin kod(förutom att felmeddelandet kanske inte kom där du ville, han har satt hlp3 men du ville nog hellre ha den på hlp5. Sen Kan hade jag nog velat få reda på alla fel som saknas på formuläret istället för att få ett felmeddelande endast:

function validera( ) {
	var bokst = /^([a-zA-Z\-\.\ ])+$/,
		mail =/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/,
		siffror=/^([0-9])+$/,
		isValid = true,
		d = document;

	if ( !bokst.test( d.getElementById('fnamn').value ) ){
		d.getElementById('hlp1').innerHTML = "Namnet får endast bestå av bostäver och (-.).";
		isValid = false;
	}

	if ( d.getElementById('fnamn').value.length < 1 ) {
		d.getElementById('hlp1').innerHTML = "Skriv ditt förnamn.";
		isValid = false;
	}

	if ( d.getElementById('val').selectedIndex === 0 ){
		d.getElementById('hlp5').innerHTML = "Ej giltig annanstyp.";
		isValid = false
	}

	if ( d.getElementById('enamn').value.length < 1 ){
		d.getElementById('hlp2').innerHTML = "Skriv ditt efternamn.";
		isValid = false;
	}

	if ( !bokst.test( d.getElementById('enamn').value ) ){
		d.getElementById('hlp2').innerHTML = "Namnet får endast bestå av bostäver och (-.).";
		isValid = false;
	}

	if ( d.getElementById('epost').value.length < 1 ){
		d.getElementById('hlp3').innerHTML = "Skriv din Epostadress.";
		isValid = false;
	}
 
	if ( !mail.test( d.getElementById('epost').value ) ){
		d.getElementById('hlp3').innerHTML = "Ej giltig epostadress.";
		isValid = false;
	}

	if ( d.getElementById('genbanksnr').value.length < 1 ){
		d.getElementById('hlp4').innerHTML = "Du måste uppge ditt genbanksnr.";
		isValid = false;
	}

	if ( !siffror.test( d.getElementById('genbanksnr').value ) ){
		d.getElementById('hlp4').innerHTML = "Endast siffror.";
		isValid = false;
	}

	if ( d.getElementById('val').value.length < 1 ) {
		d.getElementById('hlp5').innerHTML = "Du måste välja annonstyp.";
		isValid = false;
	}

	if ( d.getElementById('i_overskrift').value.length < 1 ) {
		d.getElementById('hlp6').innerHTML = "Du måste skriva en överskrift.";
		isValid = false;
	}

	if ( d.getElementById('annonstext').value.length < 1 ) {
		d.getElementById('hlp7').innerHTML = "Du måste skriva en annonstext.";
		isValid = false;
	}

	return isValid;
}

voigtann1Medlem sedan juni 20018 810 inlägg

2 jan. 2011 18:01#5

function validera( ) {
	var bokst = /^([a-zA-Z\-\.\ ])+$/,
		mail =/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/,
		siffror=/^([0-9])+$/,
		isValid = true,
		d = document;

	if ( !bokst.test( d.getElementById('fnamn').value ) ){
		d.getElementById('hlp1').innerHTML = "Namnet får endast bestå av bostäver och (-.).";
		isValid = false;
	}

	if ( d.getElementById('fnamn').value.length < 1 ) {
		d.getElementById('hlp1').innerHTML = "Skriv ditt förnamn.";
		isValid = false;
	}

	if ( d.getElementById('val').selectedIndex === 0 ){
		d.getElementById('hlp5').innerHTML = "Ej giltig annanstyp.";
		isValid = false
	}

	if ( d.getElementById('enamn').value.length < 1 ){
		d.getElementById('hlp2').innerHTML = "Skriv ditt efternamn.";
		isValid = false;
	}

	if ( !bokst.test( d.getElementById('enamn').value ) ){
		d.getElementById('hlp2').innerHTML = "Namnet får endast bestå av bostäver och (-.).";
		isValid = false;
	}

	if ( d.getElementById('epost').value.length < 1 ){
		d.getElementById('hlp3').innerHTML = "Skriv din Epostadress.";
		isValid = false;
	}
 
	if ( !mail.test( d.getElementById('epost').value ) ){
		d.getElementById('hlp3').innerHTML = "Ej giltig epostadress.";
		isValid = false;
	}

	if ( d.getElementById('genbanksnr').value.length < 1 ){
		d.getElementById('hlp4').innerHTML = "Du måste uppge ditt genbanksnr.";
		isValid = false;
	}

	if ( !siffror.test( d.getElementById('genbanksnr').value ) ){
		d.getElementById('hlp4').innerHTML = "Endast siffror.";
		isValid = false;
	}

	if ( d.getElementById('val').value.length < 1 ) {
		d.getElementById('hlp5').innerHTML = "Du måste välja annonstyp.";
		isValid = false;
	}

	if ( d.getElementById('i_overskrift').value.length < 1 ) {
		d.getElementById('hlp6').innerHTML = "Du måste skriva en överskrift.";
		isValid = false;
	}

	if ( d.getElementById('annonstext').value.length < 1 ) {
		d.getElementById('hlp7').innerHTML = "Du måste skriva en annonstext.";
		isValid = false;
	}

	return isValid;
}

emtonMedlem sedan juni 200589 inlägg

3 jan. 2011 09:43#6

Tack det funkar jättebra. Ska kolla på att stänga option och byta till span, fick inte till det i första försöket så jag får läsa på lite.
En annan sak i valideringen som jag inte får till är om man väljer säljes måste man fylla i fältet genbanksnr annars behöver man inte det. Det är svårt med flerval och validering har jag märkt.

emtonMedlem sedan juni 200589 inlägg

3 jan. 2011 09:43#7

voigtann1Medlem sedan juni 20018 810 inlägg

3 jan. 2011 10:06#8

Du löser det på det sätt du beskriver det: "Om Säljes är markerad, kontrollera även att genbanksnr inte är tomt, annars visa felmeddelande".

emtonMedlem sedan juni 200589 inlägg

3 jan. 2011 12:04#9

Jaaaa, men jag får inte ihop koden, är inte helt vän med javascript och det var ett tag sedan jag satt med det :). Jag får prova vidare.

voigtann1Medlem sedan juni 20018 810 inlägg

3 jan. 2011 12:16#10

if(d.getElementById("val").value === "saljes" && d.getElementById("genbanksnr").value.length === 0){
//Val är 'saljes' och värdet på genbanksnr är tomt, det få det inte vara!
}

emtonMedlem sedan juni 200589 inlägg

3 jan. 2011 18:02#11

Tack snälla du! Det blev jättebra, förutom att jag kom i konflikt med sifferkontrollen av genbanksnr, om man väljer köpes och inte skriver något i genbanksnr så vill den ha siffror i stället för tom ruta....

voigtann1Medlem sedan juni 20018 810 inlägg

3 jan. 2011 18:16#12

Bara lägg in logiken för det istället:

if(d.getElementById("val").value === "saljes" && !siffror.test( d.getElementById('genbanksnr').value )){
//Val är 'saljes' och värdet på genbanksnr är tomt, det få det inte vara!
}

Ett tips är också undvik svenska variabelnamn, svider att se ;)

emtonMedlem sedan juni 200589 inlägg

3 jan. 2011 18:37#13

Tack! Hade ingen aning om att man kunde sätta ihop det så. Nu har jag lärt mig något nytt.
Och ja, jag lovar att ändra alla namn :)

emtonMedlem sedan juni 200589 inlägg

22 jan. 2011 13:58#14

Måste ta upp denna tråd igen då det plötsligt inte funkar längre. Valideringen fungerar jättebra ända tills jag lägger till den sista logiken, altså den som var lösningen på mitt tidigare problem. Vad är det jag missar:(

if ( d.getElementById('value').value === "sale" && !siffror.test(d.getElementById('genecode').value.length === 0){
		d.getElementById('hlp4').innerHTML = "Vid säljesannons, uppge genbanksnr/medlemsnr.";
		isValid = false;
    }

voigtann1Medlem sedan juni 20018 810 inlägg

22 jan. 2011 15:00#15

siffror.test(d.getElementById('genecode') retunera true eller false, inte ett value.

Sen stänger du inte .test, vet inte riktigt vad du vill göra med den if-frågan.

emtonMedlem sedan juni 200589 inlägg

22 jan. 2011 16:07#16

voigtann1 skrev:

siffror.test(d.getElementById('genecode') retunera true eller false, inte ett value.

Sen stänger du inte .test, vet inte riktigt vad du vill göra med den if-frågan.

Tänkt är att om value = sale måste genecode fyllas i och det får bara vara siffror.
Har stängt .test nu men det hälpte ju inte.
Det som händer är att formuläret inte blir validerat alls utan går iväg utan validering.

voigtann1Medlem sedan juni 20018 810 inlägg

22 jan. 2011 16:10#17

if ( d.getElementById('value').value === "sale" && (d.getElementById('genecode').value.length === 0 || !siffror.test(d.getElementById('genecode')))){
	d.getElementById('hlp4').innerHTML = "Vid säljesannons, uppge genbanksnr/medlemsnr.";
	isValid = false;
}

Något i den stilen måste du göra, du kan inte (om du inte skapar en egen funktion för det)