Panelen



Forumnavigering
Senast inloggade
RSS
Sponsorer

Forum > Klientspråk > JavaScript

Kontrollera längd på fält

Hultin
Hultin

Gradering

#18593

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.

... ORANGE HEARTS!
Redigerades av Hultin den 17 november 2009. Läs tidigare inlägg.
ID: #18593 | Skapades: 2009-11-17 15:29:56 | Tråden har 4 svar och har lästs 367 gånger.

voigtan
voigtan

Gradering

#18595

Ja klart det gå

$("form").submit(function(){
    if($("input[name='name']").val().length==0)
    {
        alert('fel längd på name');
        return false; //prevent form post
    }
});

sen är det bara att kolla $("input:checked") längd på specifika inputen för checkboxens namn som du är ute efter.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #18595 | Skapades: 2009-11-17 17:43:03

voigtan
voigtan

Gradering

#18596

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>

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
Redigerades av voigtan den 17 november 2009. Läs tidigare inlägg.
ID: #18596 | Skapades: 2009-11-17 18:17:30

Hultin
Hultin

Gradering

#18598

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">&nbsp; Jag beställer ett par teleskopstavar med DVD:n för "<B>REHAB-träning</B>" för 399:-- + frakt 49:--&nbsp; </LABEL>
      <BR>
      <BR>
      <INPUT id="wmchkID2" tabindex="0" value="1" type="checkbox" name="motion">
      <LABEL for="wmchkID2">&nbsp; Jag beställer ett par teleskopstavar med DVD:n för&nbsp;"<B>Motionsträning</B>" för 399:-- + frakt 49:--&nbsp; </LABEL>
      <BR>
      <BR>
      <INPUT id="wmchkID3" tabindex="0" value="1" type="checkbox" name="Prestation">
      <LABEL for="wmchkID3">&nbsp; Jag beställer ett par teleskopstavar med DVD:n för "<B>Prestationsträning</B>" för 399:-- + frakt 49:--&nbsp; </LABEL>
      <BR>
      <BR>
      <INPUT id="wmchkID4" tabindex="0" value="1" type="checkbox" name="Stavgympa">
      <LABEL for="wmchkID4">&nbsp; Jag beställer ett par teleskopstavar med DVD:n för&nbsp;"<B>Stavgympaträning</B>" för 399:-- + frakt 49:--&nbsp;</LABEL>
      <BR>
      <BR>Har du några frågor så kontakta&nbsp;kundtjänst,&nbsp; telefon 0000-000000, &nbsp;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&nbsp;&nbsp; Ort
      <BR>
      <INPUT style="WIDTH: 55px; HEIGHT: 22px" tabindex="0" size="1" name="Postnummer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
      <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>

... ORANGE HEARTS!
Redigerades av Hultin den 18 november 2009. Läs tidigare inlägg.
ID: #18598 | Skapades: 2009-11-18 09:52:52

voigtan
voigtan

Gradering

#18599

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;
    });
});
vet inte riktigt vilka input fält du måste ha, men exempelt som är i min kod är att endast:
<INPUT style="WIDTH: 202px; HEIGHT: 22px" tabindex="0" size="18" name="Namn">
Få inte vara tom.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #18599 | Skapades: 2009-11-18 10:01:12
© Copyright 2007-2009 Shadi Domat | Version 3.0 | Sidkarta | Policy