$(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.
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;
}
}
});
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.
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>
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.
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.
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.
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.
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.
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.
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...
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.
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å. ;)
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!
