I am trying to make a sign-up form that will do client-side validation (check the correct layout of email and matching passwords) before sending any data to the server. I have been having trouble checking to see if the email is in the correct form. I can't get the if(email.indexOf(@))
to work correctly. I think I misused the .indexOf()
This is my JavaScript:
function sign_check() {
var email = document.getElementById("sign_email").value;
var user = document.getElementById("sign_user").value;
var pass = document.getElementById("sign_pass").value;
var passcon = document.getElementById("sign_confirm").value;
if(pass !== passcon){
document.getElementById("sign_alert").innerHTML="The passwords do not match"
}
//This part determines whether or not to send the data to the server
if(email.length >= 7){
if(email.indexOf("@")){
if(user.length >= 1){
if(pass.length >= 1){
if(passcon.length >= 1){
if(pass === passcon){
alert("All of the requirements have been met")
}
}
}
}
}
}
}
And this is my html:
<h1 id="pop_up" class="pop_up">Sign Up</h1>
<form id="sign_up" class="sign_up">
<label id="alert_s1" class="alert"> <br /> </label>
<input id="sign_email" class="sign" type="text" placeholder="Email" name="sign_email" /><br />
<label id="alert_s2" class="alert"> <br /> </label>
<input id="sign_user" class="sign" type="text" placeholder="Username" name="sign_user" /><br />
<label id="alert_s3" class="alert"> <br /> </label>
<input id="sign_pass" class="sign" type="text" placeholder="Password" name="sign_pass" /><br />
<label id="alert_s4" class="alert"> <br /> </label>
<input id="sign_confirm" class="sign" type="text" placeholder="Confirm Password" name="sign_confirm" />
</form>
<p id="sign_alert" class="alert"></p>
<button onclick="sign_check()">Submit</button>
<a href="javascript:void(0)" class="pop_up" id="pop_up" onclick="document.getElementById('sign_box').style.display='none'; document.getElementById('log_box').style.display='block'">Already have an acount? Click here to log in.</a>
</div>