Reputation: 187
Javascript- form validation
I'm creating a login form validation and it's not displaying what I want. Can someone point me in the right direction?
<script type="text/javascript">
var email = document.getElementById("email").value;
var pass = document.getElementById("pass".value);
//event listener
document.getElementById("button"). onclick= function()
{
checkForm();
}
function checkForm(e)
{
var erroMsg = " ";
//check email
if(email === null)
{
erroMsg+= "Your email address is incorrect";
}
//check password
if (pass === null)
{
erroMsg+= "Your password is incorrect";
}
//complete message
if(erroMsg = "")
{
erroMsg = "Form is valid!\nSubmitting...";
}
alert(erroMsg);
e.preventDefault();
}
</script>
Upvotes: 2
Views: 99
Answers (5)
Reputation: 1045
you created syntax error in 2nd line in script:
var email = document.getElementById("email").value;
var pass = document.getElementById("pass".value); //It should be document.getElementById("pass").value;
Point 1.You made some mistakes..some are mentioned by comment.
Point 2.Remember this code only deal with the validation on empty(blank) input by user.
Edited:
<body>
<label for="name">Email: </label>
<input type="text" id="email" name="email">
<label for="pass">Pass: </label>
<input type="password" id="pass" name="pass">
<br>
<button id="button">Submit</button>
<script type="text/javascript">
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
var erroMsg = " ";
//event listener
document.getElementById("button").addEventListener('click', checkForm, false);
function checkForm(e)
{
var errmsg = "";
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
//check email
if (!email) {
erroMsg= " Your email address is incorrect";
}
//check password
if (!pass) {
erroMsg= " Your password is incorrect";
}
if (!email && !pass) {
erroMsg = " Your email address and password is incorrect ";
}
//complete message
if (email && pass) //At this place you cant compare by asignment operator in ur code.
{
erroMsg = "Form is valid!\nSubmitting...";
}
alert(erroMsg);
e.preventDefault();
}
</script></body>
</html>
This code considers all combination of empty input validation... Check it out!! :)
Upvotes: 1
Reputation: 5880
After that change I'm still getting an alert with no message even when I click submit and leave my fields empty I get an empty alert message with no message
That is exactly what your code is expected to do since the erroMsg is "(space)" and not "".
...
//complete message
if(erroMsg === "") {
erroMsg = "Form is valid!\nSubmitting...";
}
alert(erroMsg); // <== here
...
Even if your condition erroMsg === "" evaluates to true or false, you'll get the alert message (an empy message). And because the variable erroMsg is initialized with an unnecessary space, the condition may condition may never evaluate to true.
Try something like the following:
...
checkForm(e) // <== pass on the event to the handler
...
function checkForm(e) {
var erroMsg = ""; // <== remove the space
//check email
if(email === null)
{
erroMsg = "Your email address is incorrect"; // <== removed unnecessary + assignment.
alert(erroMsg);
return false; // <== make sure the form is not submitted if not valid
}
//check password
if (pass === null)
{
erroMsg = "Your password is incorrect";
alert(erroMsg);
return false;
}
//complete message
if(erroMsg = "")
{
erroMsg = "Form is valid!\nSubmitting...";
}
alert(erroMsg);
e.preventDefault();
}
Upvotes: 0
Reputation: 31823
(function() {
document.getElementById("button").addEventListener('click', checkForm, false);
function checkForm(e) {
var message = "";
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
//check email
if (!email) {
message += "Your email address is incorrect";
}
//check password
if (!pass) {
message += "Your password is incorrect";
}
//complete message
if (email && pass) {
message = "Form is valid!\nSubmitting...";
}
alert(message);
e.preventDefault();
}
}());<label for="name">Email: </label>
<input type="text" id="email" name="email">
<label for="pass">Pass: </label>
<input type="password" id="pass" name="pass">
<br>
<button id="button">Submit</button>Upvotes: 0
Reputation: 4370
malformed on get value and unnecessary space on var erroMsg,
you also have to have the value when you click
consider
You can just check if the variable has a truthy value or not. That means
if( value ) {
}
will evaluate to true if value is not:
- null
- undefined
- NaN
- empty string ("")
- 0
- false
result
var email = document.getElementById("email");
var pass = document.getElementById("pass");
document.getElementById("button").onclick= checkForm;
function checkForm(e){
var erroMsg = "";
if(!email.value){
erroMsg+= "Your email address is incorrect";
}
if (!pass.value){
erroMsg+= "Your password is incorrect";
}
if(!erroMsg){
erroMsg = "Form is valid!\nSubmitting...";
}
alert(erroMsg);
}
Upvotes: 0
Reputation: 104690
Try this instead, I correct few issues in your code:
<script type="text/javascript">
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
//event listener
document.getElementById("button").onclick = function() {
checkForm();
}
function checkForm(e) {
var erroMsg = "";
//check email
if(email === null) {
erroMsg+= "Your email address is incorrect";
}
//check password
if (pass === null) {
erroMsg+= "Your password is incorrect";
}
//complete message
if(erroMsg === "") {
erroMsg = "Form is valid!\nSubmitting...";
}
alert(erroMsg);
e.preventDefault();
}
</script>
Upvotes: 0