Forum > Klientspråk > JavaScript
Hejsan. Jag undrar hur man, utan att använda ett javascript biblotek såsom jQuery, kan kontrollera hurvida ett fält i ett formulär har ett visst värde när man klickar på "submit" knappen, vet ju såklart basics tex "onsubmit="checkform()" men inte mer specifikt hur jag kollar att text fält "name" inte är tom och längre än 8 tecken.
/J
Edit:
Undrar även hur jag kollar om en av 4 checkboxar är i kryssade, om inte skall en alert() visas och man skall inte kunna gå vidare.
| Skriv utJa klart det gå
$("form").submit(function(){
if($("input[name='name']").val().length==0)
{
alert('fel längd på name');
return false; //prevent form post
}
});gjorde en enkel lösning:
$(document).ready(function() {
$('#testForm').submit( function(){
var errors = [];
//Check if name length is zero
var $name = $("input[name='Name']",this);
if($name.val().length==0) {
errors.push("Name must be longer then 0");
}
//Check checkboxes
var $checkboxes = $("input:checkbox:checked",this);
if($checkboxes.length==0) {
errors.push("At least one checkbox must be checked");
}
//If error Exists Prevent form post and display error in an alertbox
if(errors.length>0) {
var alertMessage = "";
$.each(errors, function() {
alertMessage+= " - " + this + "\n";
});
alert(alertMessage);
return false;
}
return true;
});
});
och exempel på formuläret:
<form id="testForm" action="/form-post" method="post">
<div>
<label for="Name">Name:</label><input type="text" id="Name" name="Name" />
</div>
<ul>
<li><input type="checkbox" name="intrest" value="golf" id="intrest_1" /><label for="intrest_1">Golf</label></li>
<li><input type="checkbox" name="intrest" value="Hockey" id="intrest_2" /><label for="intrest_2">Hockey</label></li>
<li><input type="checkbox" name="intrest" value="Football" id="intrest_3" /><label for="intrest_3">Football</label></li>
<li><input type="checkbox" name="intrest" value="Tenis" id="intrest_4" /><label for="intrest_4">Tenis</label></li>
</ul>
<div>
<input type="submit" />
</div>
</form>
Mitt förmulär (skratta på, lyckligtvis inte jag som gjort det)
<FORM method="post" name="OrderForm" id="OrderForm" action="placeorder.php">
<INPUT id="wmchkID1" tabindex="0" value="1" type="checkbox" name="REHAB">
<LABEL for="wmchkID1"> Jag beställer ett par teleskopstavar med DVD:n för "<B>REHAB-träning</B>" för 399:-- + frakt 49:-- </LABEL>
<BR>
<BR>
<INPUT id="wmchkID2" tabindex="0" value="1" type="checkbox" name="motion">
<LABEL for="wmchkID2"> Jag beställer ett par teleskopstavar med DVD:n för "<B>Motionsträning</B>" för 399:-- + frakt 49:-- </LABEL>
<BR>
<BR>
<INPUT id="wmchkID3" tabindex="0" value="1" type="checkbox" name="Prestation">
<LABEL for="wmchkID3"> Jag beställer ett par teleskopstavar med DVD:n för "<B>Prestationsträning</B>" för 399:-- + frakt 49:-- </LABEL>
<BR>
<BR>
<INPUT id="wmchkID4" tabindex="0" value="1" type="checkbox" name="Stavgympa">
<LABEL for="wmchkID4"> Jag beställer ett par teleskopstavar med DVD:n för "<B>Stavgympaträning</B>" för 399:-- + frakt 49:-- </LABEL>
<BR>
<BR>Har du några frågor så kontakta kundtjänst, telefon 0000-000000, CENSUR
<BR>
<BR><B>Betalningsvillkor:</B>
<BR>Förskottsbetalning kan göras via vårt bankgiro CENSUR
<BR>CENSUR är en del av CENSUR
<BR><FONT color="#ff0000">OBS! Vid bankgirobetalning glöm ej att uppge fullständigt namn och adress.</FONT>
<BR>
<LABEL for="wmradID1">Vid fakturabetalning måste fullständigt personnummer anges.
<BR>Beställaren måste ha fyllt 18 år.
<BR>Vi levererar endast inom Sverige.
<BR>
<BR>
<BR>
<INPUT id="wmradID1" type="radio" value="1" name="Payment" onclick="javascript:document.orderform.Personnummer.disabled=true">
<LABEL for="wmradID1">Förskottsbetalning
<BR></LABEL>
<INPUT id="wmradID2" tabindex="0" value="2" type="radio" name="Payment" onclick="javascript:document.orderform.Personnummer.disabled=false">
<LABEL for="wmradID2">Mot faktura</LABEL></LABEL></LABEL></LABEL></LABEL></LABEL>
<P align="left">
Namn
<BR>
<INPUT style="WIDTH: 202px; HEIGHT: 22px" tabindex="0" size="18" name="Namn">
<BR>Personnummer (endast vid fakturering)
<BR>
<INPUT style="WIDTH: 116px; HEIGHT: 22px" tabindex="0" size="1" name="Personnummer">
<BR>Adress
<BR>
<INPUT style="WIDTH: 175px; HEIGHT: 22px" tabindex="0" size="18" name="Adress">
<BR>Postnummer Ort
<BR>
<INPUT style="WIDTH: 55px; HEIGHT: 22px" tabindex="0" size="1" name="Postnummer">
<INPUT tabindex="0" size="18" name="Ort">
<BR>Telefonnummer
<BR>
<INPUT style="WIDTH: 89px; HEIGHT: 22px" tabindex="0" size="1" name="Telefonnummer">
<BR>e-mail
<BR>
<INPUT style="WIDTH: 106px; HEIGHT: 22px" tabindex="0" size="1" name="e-mail">
<BR>
<BR>
<BR>
<INPUT value="Skicka" type="submit" name="subm">
<INPUT value="Rensa" type="reset" name="res"></P>
</FORM>
för din HTML kod just nu:
$(document).ready(function() {
$('#OrderForm').submit( function(){
var errors = [];
//Check if name length is zero
var $name = $("input[name='Namn']",this);
if($name.val().length==0) {
errors.push("Name must be longer then 0");
}
//Check checkboxes
var $checkboxes = $("input:checkbox:checked",this);
if($checkboxes.length==0) {
errors.push("At least one checkbox must be checked");
}
//If error Exists Prevent form post and display error in an alertbox
if(errors.length>0) {
var alertMessage = "";
$.each(errors, function() {
alertMessage+= " - " + this + "\n";
});
alert(alertMessage);
return false;
}
return true;
});
});<INPUT style="WIDTH: 202px; HEIGHT: 22px" tabindex="0" size="18" name="Namn">