bikicMedlem sedan juni 2006261 inlägg Hej!
Jag har ett formulär som ser ut så här:
<form id="loginForm" name="loginForm" method="post" action="login.asp">
<label>Username: <span id="nameInfo"></span></label>
<input class="in01" style="width:220px;" type="text" id="fldUser_name" name="fldUser_name">
<label>Password: <span id="passInfo"></span></label>
<input class="in01" style="width:220px;" type="password" id="fldUser_pass" name="fldUser_pass">
<a class="btn-regular" name="submit" id="submit" href="#"><span>Login</span></a>
</form>
Sen har jag en validering som ser ut så här:
$(document).ready(function(){
//global vars
var form = $("#loginForm");
var name = $("#fldUser_name");
var nameInfo = $("#nameInfo");
var pass = $("#fldUser_pass");
var passInfo = $("#passInfo");
//On blur
name.blur(validateName);
pass.blur(validatePass);
//On Submitting
form.submit(function(){
if(validateName() & validatePass())
return true;
else
return false;
});
//validation functions
function validateName(){
if(name.val().length < 4){
$("#nameInfo").addClass("info_error").show("slow");
nameInfo.text("Username must have more than 3 letters!");
return false;
} else {
$("#nameInfo").removeClass("info_error").addClass("info_success").show("slow");
nameInfo.text("Username is valid!");
return true;
}
}
function validatePass(){
if(pass.val().length < 4){
$("#passInfo").addClass("info_error").show("slow");
passInfo.text("Password must have more than 3 characters.");
return false;
} else {
$("#passInfo").removeClass("info_error").addClass("info_success").show("slow");
passInfo.text("Password is valid!");
return true;
}
}
});
Vad jag behöver hjälp med är att få validering att fatta att jag submittar via en länk istället för en input type=submit.
Jag har provat med massa funktioner men inget fungerar, tänkte ni kanske kunde hjälpa mig på traven.
Jag har testat med följande:
$("#submit").click(function(){
form.submit();
if(validateName() & validatePass())
return true;
else
return false;
});
Detta fattar den och submittar men tar inte hänsyn till valideringen.
Vad kan jag göra mer? Tacksam för svar!
$("#submit").click(function(){
form.submit();
return false;
});
Eftersom du redan har en binding på ditt form objekt så räcker det att du triggar den, och självklart retunera false så att den inte försöker gå till a-elementets default click event.
Sen bör du nog kolla igenom js koden, du har redan en referens på exempelvis $("#passInfo") så varför hämtar den två gånger (kolla funktionen validatePass)
sen skall det vara två & i din if fråga.
$(document).ready(function(){
//global vars
var form = $("#loginForm"),
name = $("#fldUser_name").blur(validateName),
nameInfo = $("#nameInfo"),
pass = $("#fldUser_pass").blur(validatePass),
passInfo = $("#passInfo");
$("#submit").click(function( ) {
form.submit( );
return false;
});
//On Submitting
form.submit(function( ){
if(validateName( ) && validatePass( )) {
return true;
}
return false;
});
//validation functions
function validateName(){
if(name.val().length < 4){
nameInfo.text("Username must have more than 3 letters!").addClass("info_error").show("slow");
return false;
} else {
nameInfo.removeClass("info_error").text("Username is valid!").addClass("info_success").show("slow");
return true;
}
}
function validatePass(){
if(pass.val().length < 4) {
passInfo.addClass("info_error").text("Password must have more than 3 characters.").show("slow");
return false;
} else {
passInfo.removeClass("info_error").text("Password is valid!").addClass("info_success").show("slow");
return true;
}
}
});
Fungera bättre
bikicMedlem sedan juni 2006261 inlägg Hej Voigt!
Jag har testat detta också men den fullföljer ändå, trots att jag sätter return false;.
$("#submit").click(function(){
form.submit();
return false;
if(validateName() & validatePass())
return true;
else
return false;
});
Så här ser ju koden ut när jag postar med en vanlig input och då fungerar allt som det ska.
form.submit(function(){
if(validateName() & validatePass())
return true;
else
return false;
});
sätt två && i en if fråga, vad fungera inte för dig?
Dock förstå jag inte varför du blandar in a-element i ett formulär... Varför inte köra input eller button, gå utmärkt att stylar båda elementen + behålla funktionalitet för de som inte har javascript aktiverat.
bikicMedlem sedan juni 2006261 inlägg Det som inte fungerar är att den postar formuläret innan den kollar på valideringen. Jag vill att valideringen ska fungera innan den postar, vilket den gör med koden ovan "form.submit-funktionen" och inte min egna lösning "$("#submit")-funktionen".
Det behöver jag hjälp med!
Så fort jag använder mig av <input type="submit" name="submit" id="submit" value="submit"> tillsammans med "form.submit-funktionen" så fungerar det precis så som det ska.
Men jag har en länk som jag vill posta formuläret med som ser ut så här: <a class="btn-regular" name="submit" id="submit" href="#"><span>Login</span></a>
Hur ska jag få det att fungera med detta?
fungera för mig: http://voigt.se/sandbox/wf/bikic/
Men jag har en länk som jag vill posta formuläret med
Varför?
Danne VMedlem sedan aug. 20068 090 inlägg
bikic skrev:
Det som inte fungerar är att den postar formuläret innan den kollar på valideringen. Jag vill att valideringen ska fungera innan den postar, vilket den gör med koden ovan "form.submit-funktionen" och inte min egna lösning "$("#submit")-funktionen".
Det behöver jag hjälp med!
Så fort jag använder mig av <input type="submit" name="submit" id="submit" value="submit"> tillsammans med "form.submit-funktionen" så fungerar det precis så som det ska.
Men jag har en länk som jag vill posta formuläret med som ser ut så här: <a class="btn-regular" name="submit" id="submit" href="#"><span>Login</span></a>
Hur ska jag få det att fungera med detta?
Därför att du måste ha en input-tag för att webbläsaren ska fatta att du vill skicka formuläret.
Kolla runt lite här: http://www.google.se/search?q=link+instead+of+submit+button&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
Danne V skrev:
Därför att du måste ha en input-tag för att webbläsaren ska fatta att du vill skicka formuläret.
Du få rätta mig om jag har fel men med input-tag menar du input med typen submit eller ett vilket input element som helst?
Men du behöver inte ha det, med javascript så triggar du form-elementetes event för submit, så det kommer fungera.
Men jag ser inte varför man skulle vilja göra det med ett a-element. Finns ingen anledning i sig att köra det. Är det för att du vill ha andra element i det så kör på button elementet den kan ha fler element i sig.
edit:
En annan tråkig feature som försvinner är <enter>-tangenten i ditt formulär att den postar automatiskt.
Danne VMedlem sedan aug. 20068 090 inlägg
voigtann1 skrev:
Du få rätta mig om jag har fel men med input-tag menar du input med typen submit eller ett vilket input element som helst?
type submit givetvis. Ville bara göra TS uppmärksam på att en a-tag inte har något med ett formulär att göra. Lägger du in javascript i a-taggen, så är det fortfarande inte a-taggen i sig som aktiverar submit, utan javascriptet. Alltså a-tag aktiverar js som aktiverar submit.
bikicMedlem sedan juni 2006261 inlägg Hej alla,
jag fick löst det via Voigt och hans script som han postade med länken http://voigt.se/sandbox/wf/bikic. Här hade han dock lagt koden lite annorlunda äv hur jag hade gjort, vilket också blev anledningen till att det inte fungerade för mig.
$("#submit").click(function( ) {
form.submit();
return false;
});
form.submit(function(){
if(validateName() && validatePass()) {
return true;
}
return false;
});
För att lösa det med enterknappen så gjorde jag så här:
$("form").keypress(function(e){
if(e.which == 13){
form.submit();
}
});
Notera bikic, jag har inte gjort några större ändringar i din kod (vilket fungerade för mig från start).
Sen ser jag fortfarande inte någon som helst anledning varför du vill postar ett formulär med ett a-element, det är ju en länk.
bikicMedlem sedan juni 2006261 inlägg Hehe!
Jag ska förklara varför jag vill göra det med en länk och inte en input.
Då jag har skapat fina knappar med hjälp av CSS så kan jag återanvända dessa på alla inputs som submittar ett formulär - enkelt och bekvämt. Då vet jag också att allt ser likadant ut i alla webbläsare.
metalboyMedlem sedan jan. 2005953 inlägg
bikic skrev:
Hehe!
Jag ska förklara varför jag vill göra det med en länk och inte en input.
Då jag har skapat fina knappar med hjälp av CSS så kan jag återanvända dessa på alla inputs som submittar ett formulär - enkelt och bekvämt. Då vet jag också att allt ser likadant ut i alla webbläsare.
Men det går ju lika bra att ändra utseendet på ett input-element som på ett a-element.
Danne VMedlem sedan aug. 20068 090 inlägg
bikic skrev:
Hehe!
Jag ska förklara varför jag vill göra det med en länk och inte en input.
Då jag har skapat fina knappar med hjälp av CSS så kan jag återanvända dessa på alla inputs som submittar ett formulär - enkelt och bekvämt. Då vet jag också att allt ser likadant ut i alla webbläsare.
. :q Varför formaterar du inte bara om knappen med css då istället? :OO
Oops... metalboy hann före...
bikicMedlem sedan juni 2006261 inlägg metalboy och danne V:
Du kan inte styla en input på samma sätt som du kan styla ett a-element och får det att fungera så som jag vill ha det. Varför ens diskutera detta? För att få bästa möjliga resultat med knappar med a-element så måste man bygga upp det i två etapper.
<a href=""><span>Text</span></a> - Detta går inte med input.
Färdigdiskuterat? ;)
Danne VMedlem sedan aug. 20068 090 inlägg
bikic skrev:
metalboy och danne V:
Du kan inte styla en input på samma sätt som du kan styla ett a-element och får det att fungera så som jag vill ha det. Varför ens diskutera detta? För att få bästa möjliga resultat med knappar med a-element så måste man bygga upp det i två etapper.
<a href=""><span>Text</span></a> - Detta går inte med input.
Färdigdiskuterat? ;)
Heh... jag har svårt att hålla med något av dina två påståenden. Men om du är glad och nöjd så är jag det också. ;)
bikic skrev:
metalboy och danne V:
Du kan inte styla en input på samma sätt som du kan styla ett a-element och får det att fungera så som jag vill ha det. Varför ens diskutera detta? För att få bästa möjliga resultat med knappar med a-element så måste man bygga upp det i två etapper.
<a href=""><span>Text</span></a> - Detta går inte med input.
Färdigdiskuterat? ;)
Klart du kan, jag har påpekat det varje gång, gör det med en button!
Sen är väl ändå: http://www.webforum.nu/showpost.php?p=1527124&postcount=6 det inlägg som gav dig det rätta svaret?
bikicMedlem sedan juni 2006261 inlägg Om man nu kan skapa en knapp med dynamisk bredd, runda hörn (fungera i alla browsres), med en hoverfunktion som byter färg så får du gärna visa.
bikic skrev:
Om man nu kan skapa en knapp med dynamisk bredd, runda hörn (fungera i alla browsres), med en hoverfunktion som byter färg så får du gärna visa.
Visa vad du har för CSS kod på din kod just nu för a-elementet så skall jag fixa det till dig.
Danne VMedlem sedan aug. 20068 090 inlägg
bikic skrev:
Om man nu kan skapa en knapp med dynamisk bredd, runda hörn (fungera i alla browsres), med en hoverfunktion som byter färg så får du gärna visa.
Du kan över huvud taget inte få rundade hörn (m.h.a. css3) att funka i alla webbläsare, oavsett vilket element du applicerar det på.
