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.
