Validering
Hej kan ni påpeka varför min funktion inte rör som det tillverkads Tack?
function validateForm(){
var name = document.getElementById('name').value;
var number = document.getElementById('number').value;
var email = document.getElementById('email').value;
var adress = document.getElementById('adress').value;
var city = document.getElementById('city').value;
var state = document.getElementById(state).value;
var zip = document.getElementById('zip').value;
if(name === '' || number === '' || email === '' || adress === '' || state === '' || city ==== '' || zip === '' ){
alert('Please provide all the sections thanks!');
return false;
}else{
return true;
}
}
Jag kan inte JavaScript, men sen här satsen ser skum ut. Variabeln state har väl ett okänt värde vid anropet av getElementById?
bra att du sagt det men ändå saknar den att funka!
Jag kan inte uttala mig om syntaxen, men vad händer när du kör funktionen?
Lägg gärna in spårutskrifter i koden, t.ex att du skriver ut värdet av name, number, email o.s.v. innan du gör jämförelsen.
Jag tror också det hjälper om du visar HTML-koden.
<div id="Hiding">
<div class="signUp">
<form onsubmit="return validateForm()">
<fieldset>
<legend>Personal Info</legend>
<label for="name">
<div class="name">
<i class="fa-solid fa-user"></i>
<p>Full Name</p>
</div>
<input type="text" name="name" id="name" placeholder="SomeOne..">
</label>
<label for="number">
<div class="name">
<i class="fa-solid fa-phone"></i>
<p>Number</p>
</div>
<input type="text" name="number" id="number" placeholder="+46739444245">
</label>
<label for="adress">
<div class="name">
<i class="fa-solid fa-location-pin"></i>
<p>Address</p>
</div>
<input type="text" name="adress" id="adress" placeholder="Lillmössvägen 8A">
</label>
<label for="email">
<div class="name">
<i class="fa-solid fa-envelope"></i>
<p>Email</p>
</div>
<input type="text" name="email" id="email" placeholder="Enter your email adress">
</label>
<label for="city">
<div class="name">
<i class="fa-solid fa-landmark"></i>
<p>City</p>
</div>
<input type="text" name="city" id="city" placeholder="Hägersten..">
</label>
<label for="state">
<div class="name">
<div class="last">
<p>State</p>
<input type="text" name="state" id="state" placeholder="Stockholm">
</div>
<div class="last">
<p>ZIP</p>
<input type="number" id="zip" name="zip" placeholder="01001">
</div>
</div>
</label>
</fieldset>
</form>
</div>
</div>
<p id="newText"></p>
<div class="button">
<button id="button" onclick="myButton()" type="submit">Register</button>
<a href="sign-up.html" id="back"></a>
</div>Ser nu att du har 4 likhetstecken i ditt villkod.
jag förstår inte dig !
city ==== ''
detta ställer till det för dig. Javascript sväljer det mesta men säger inte ifrån om det är felaktigt.
Nu använde jag ett annat sätt, i formen onsubmit använde jag "return false;" och på knappen onclick använde jag en funktion som är validateform. sedan använde jag samma js skrivit som jag skrivit här, nu svarar den men det enda som jag vill ha ett särskilt width and height medan användare ifyller alla i formen.
Det är svårt att förstå vad du menar. Kan du visa din kompletta kod (JS och HTML) och vad du vill uppnå så kan vi försöka hjälpa dig.
<form onsubmit="return false;">
<fieldset>
<legend>Personal Info</legend>
<label for="name">
<div class="name">
<i class="fa-solid fa-user"></i>
<p>Full Name</p>
</div>
<input type="text" name="name" id="name" placeholder="SomeOne else..">
</label>
<label for="number">
<div class="name">
<i class="fa-solid fa-phone"></i>
<p>Number</p>
</div>
<input type="text" name="number" id="number" placeholder="+46739444245">
</label>
<label for="adress">
<div class="name">
<i class="fa-solid fa-location-pin"></i>
<p>Address</p>
</div>
<input type="text" name="adress" id="adress" placeholder="Lillmössvägen 8A">
</label>
<label for="email">
<div class="name">
<i class="fa-solid fa-envelope"></i>
<p>Email</p>
</div>
<input type="text" name="email" id="email" placeholder="Enter your email adress">
</label>
<label for="city">
<div class="name">
<i class="fa-solid fa-landmark"></i>
<p>City</p>
</div>
<input type="text" name="city" id="city" placeholder="Hägersten..">
</label>
<label for="state">
<div class="name">
<div class="last">
<p>State</p>
<input type="text" name="state" id="state" placeholder="Stockholm">
</div>
<div class="last">
<p>ZIP</p>
<input type="number" id="zip" name="zip" placeholder="01001">
</div>
</div>
</label>
</fieldset>
</form>function validateForm(){
var a = document.getElementById('name').value;
var b = document.getElementById('number').value;
var c = document.getElementById('adress').value;
var d = document.getElementById('email').value;
var e = document.getElementById('state').value;
var f = document.getElementById('city').value;
var g = document.getElementById('zip').value;
if(a === ''){
alert("Fill the section name!");
}else if(b === ''){
alert("Fill the section number!");
}else if(c === ''){
alert("Fill the section adress!");
}else if(d === ''){
alert("Fill the section email!");
}else if(e === ''){
alert("Fill the section state!");
}else if(f === ''){
alert("Fill the section city!");
}else if(g === ''){
alert("Fill the section Zip!");
}
else{
alert("THANKS FOR SUBMITTING!");
}
}det som jag vill är medan jag uppfyller allt i formen, kommer den sista delen med olika färger svara på display, den else menar jag!
Och hur vill du aktivera validateForm? Vad är det för färger du vill visa? Vad ska de representera och var ska de visas?
det ska visa på samma ruta som "if och else if" svarar men bara för visa lite olikt på else delen i sist så därför vill jag ha olika färg på bakgrunden av texten thanks for submitting!
Det är inte möjligt att ändra färgen på systemets alert-box. Du måste skapa ett eget fönster som gör samma sak som är möjligt att styra med CSS.
Shali_Mehr skrev:function validateForm(){ var a = document.getElementById('name').value; var b = document.getElementById('number').value; var c = document.getElementById('adress').value; var d = document.getElementById('email').value; var e = document.getElementById('state').value; var f = document.getElementById('city').value; var g = document.getElementById('zip').value; if(a === ''){ alert("Fill the section name!"); }else if(b === ''){ alert("Fill the section number!"); }else if(c === ''){ alert("Fill the section adress!"); }else if(d === ''){ alert("Fill the section email!"); }else if(e === ''){ alert("Fill the section state!"); }else if(f === ''){ alert("Fill the section city!"); }else if(g === ''){ alert("Fill the section Zip!"); } else{ alert("THANKS FOR SUBMITTING!"); } }
Tänk på att HTML5 required attribut för input element funkar för att kontrollera obligatoriska element hyfsat bra i mån av grundläggande front-end validering istället för att behöva kolla om besökare fyllt i värde i input fält via JS.
Likaså är front-end validering av formulärdata inte att rekommendera rent allmänt. Mer än i väldigt basic fall.
Som @CurtJ skrev så kan du inte styla alert boxen, men däremot kan du lägga in en "output div" t ex. med ett unikt ID som du sen kan hämta via document.getElementById i din JS kod och antingen styla via extern CSS fil genom att koda upp stil för IDt för output elementet eller lägga till en klass till ID elementet när det du vill uppnå via JS har inträffat, och sen koppla en CSS stilregel till just den klassen.
Lägga till klass till sådan output div hade kunnat se ut något som följer:document.querySelector("#Hiding form").addEventListener("submit", function() {
let outputDIV = document.getElementById("output");
if(validateForm()) { // if validateForm returns true = validation complete and valid, color output DIV green via CSS class .greenBGColor
outputDIV.classList.add("greenBGColor");
}else {
if(outputDIV.classList.contains("greenBGColor")) { // if NOT validated, we check if .greenBGColor class exist, if it does, we might want to remove it? To not show green color for when Not validated maybe?
outputDIV.classList.remove("greenBGColor");
}
}
});
OBS! Har inte testat koden ovan, bara höftat fram den som ett grovt skissat exempel, och förmodligen funkar den inte exakt såsom den är skriven, men skrivit den som pseudokod för att försöka förmedla ett typ av tillvägagångssätt som kanske hade kunnat hjälpa dig uppnå vad jag tror du försöker få till?
