JavaScript not giving alert on invalid Confirm Password text - javascript

For proper registration, user is required to enter password two times and password in both these textboxes should match.
However, on validating this using this code, JavaScript is not showing alert dialog.
Here pswrd and pswrd1 are two textboxes of password type.
var message="";
var result=false;
if(pswrd.value!== pswrd1.value)
{
message+="\nPasswords did not match";
result=false;
}
if(!result)
{
alert(message);
}

Try this
var message="";
var result=false;
if(pswrd.value!== pswrd1.value)
{
message = "Passwords did not match";
result=false;
}
else {
result = true;
}
if(!result)
{
alert(message);
}

Try this code.
if(pswrd.value!== pswrd1.value)
{
alert("Password does not matched!");
return false;
}
Hope this help :)

if(pswrd.value !== pswrd1.value)
the text in bold above should be != and not !==
!== is not an operator, use == for equality and != for unequality

Related

I am trying to use use this validation in my html tag by using onsubmit=return validateForm()

//this is the javascript program for validation
function validateForm()
{
var name=document.myform.uname.value;
var password=document.myform.password.value;
var conpass = document.myform.repassword.value;
boolean valid = true;
if(password != conpass)
{
alert("password is not same");
valid=false;
}
else if(name==null || name=="")
{
alert("User Name should not be blank..");
valid=false;
}
else if(password==""|| password==null)
{
alert("Password should not be blank");
valid=false;
}
else if(!this.form.checkbox.checked)
{
alert('You must agree to the terms first.');
return false;
}
else{
return valid;
}
};
//and this is the html in which I am using this but it is not working properly,it is not taking the js validation and directly forwarding me to the reg.jsp page.
<form action="reg.jsp" name="myform" method="post" onsubmit="return validateForm()" >
In order to prevent submit via javascript, you have to return false in your onsubmit handler.
So the in the following line the validateForm() must return false:
<form action="reg.jsp" name="myform" method="post" onsubmit="return validateForm()" >
You have many if-else blocks that set the var valid = false and this is ok.
But this valid variable should be returned. You do this only in the last else blocks.
else if(!this.form.checkbox.checked)
{
alert('You must agree to the terms first.');
return false;
}
else{
return valid;
}
The previous checks are just preparing the variable, but don't return it.
And this is what you need to do.
Here is an example how it can be done:
function validateForm() {
var name=document.myform.uname.value;
var password=document.myform.password.value;
var conpass = document.myform.repassword.value;
var valid = true;
var message = "everything is valid";
if(password != conpass)
{
message = "password is not same";
valid = false;
}
else if(name==null || name=="")
{
message = "User Name should not be blank..";
valid = false;
}
else if(password==""|| password==null)
{
message = "Password should not be blank";
valid = false;
}
else if(!this.form.checkbox.checked)
{
message = "You must agree to the terms first.";
valid = false;
}
alert(message);
return valid;
};
Other improvement could be:
Reordering the conditions by descending importance.
For example: if the Term are not accepted, is not important, if the password is empty.
If password is empty, it is not important, if the conpass is the same.
Using html5, which hast more input types and adjustable build-in validation for common cases. See more here: http://html5doctor.com/html5-forms-input-types/

ELSE IF Statement not validating information

Validate form has been working fine but I have now tried adding email validation to the code and now nothing will validate, form submits without any popup error boxes.
Here's The Current Code:
<script type="text/javascript">
function validateForm(){
var a=document.forms["order_form"]["fname"].value;
var b=document.forms["order_form"]["address"].value;
var c=document.forms["order_form"]["city"].value;
var d=document.forms["order_form"]["pcode"].value;
var e=document.forms["order_form"]["email"].value;
var atpos=email.indexOf("#").value;
var dotpos=email.lastIndexOf(".").value;
if (a==null || a=="")
{
alert("Full name must be filled out");
return false;
}
else if (b==null || b=="")
{
alert("Address must be filled out");
return false;
}
else if (c==null || c=="")
{
alert("City must be filled out");
return false;
}
else if (d==null || d=="")
{
alert("Post-Code must be filled out");
return false;
}
else if (e==null || e=="")
{
alert("Email Address must be filled out");
return false;
}
else if (atpos<1||dotpos<atpos+2||dotpos+2>=email.length)
{
alert("Not a valid e-mail address");
return false;
}
}
</script>
Form is likely submitting due to the following errors
Change:
var atpos=email.indexOf("#").value;
var dotpos=email.lastIndexOf(".").value;
To
var atpos=e.indexOf("#");
var dotpos=e.lastIndexOf(".");
indexOf() returns a number not an object so there is no value property.
Also as noticed by #fpierrat email should be e
I don't see any declaration for email before following:
var atpos=email.indexOf("#").value;
var dotpos=email.lastIndexOf(".").value;
Maybe you meant e, not email?
Also delete the .value after indexof() calls, see #charlieftl's answer, we were quite complementary on this ;-)

Why won't JavaScript alert box work in this example?

I am trying to validate 3 fields in a html form using javascript. If any of the fields are empty an alert box appears with a message indicating which fields are empty. This all works fine. I'm having a problem getting the message (msg2) to appear in an alert box when the form has been completed properly. My code is below-I know it's just something simple that I'm missing if anyone can help. Thanks!
var valid = true;
var msg="Incomplete form:\n";
var msg2="Success! There are no null fields.";
if ( myname== "" ) {
msg+="You need to fill the name field!\n";
valid = false;
}
if ( emailaddress == "" ) {
msg+="You need to fill in your email!\n";
valid = false;
}
if ( commentString == "" ) {
msg+="You need to fill in your comment!\n";
valid = false;
}
if ((!myname=="")&&(!emailaddress=="")&&(!commentString=="")){
return msg2;
}
if (!valid) alert(msg);
return valid;
}
You're right, it's something simple: return msg2; will not open an alert box. You still have to call alert() somewhere.
i think a little change in your code will solve the problem:
if (!valid) alert(msg);
return valid;
}
change it to
if (!valid) {
alert(msg);
return valid;
}
if (!valid) {
alert(msg);
} else {
alert(msg2);
}
return valid
Maybe somethign like that? And remove the block with if ((!myname=="")&& ...

PHP Validation and Javascript Validation won't work together

When I combine my php form validation code with my javascript validation code, the javascript code fails to work when I hit the submit button. It will only validate the first form field and not the 3 others and then php will validate all fields. I don't want the php form validation to do anything until javascript has completed the form validation.
When I use only php or only javascript to validate, then the code works correctly. What am I missing here? Is it something to do with the beginning of the form?
"form name="contactform" id="contactform" method="post"
action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
onsubmit="return validateentry();">"
Am I supposed to do the php form validation while "action" goes to a different web page?
The javascript code:
function validateemail()
{
var emailentry=document.forms.contactform.email.value;
at=emailentry.indexOf("#");
period=emailentry.lastIndexOf(".");
if(at < 1 || ( period - at < 2 ))
{
alert("Please enter correct email in the format of 'yourmail#yourwebsite.com'")
document.forms.contactform.email.focus();
return false;
}
return(true);
}
function validatephonenumber()
{
var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
var numbers = document.forms.contactform.phone.value;
var verified = re.exec(numbers);
if (!verified)
{
alert("Please enter a phone number in the format of 999-999-9999");
return false;
}
return(true);
}
function validateentry()
{
if(document.forms.contactform.name.value=="")
{
alert("Please provide your name.");
document.forms.contactform.name.focus();
return false;
}
if(document.forms.contactform.company.value=="")
{
alert("Please provide your company name. If you don't have one, simply state
that you don't.");
document.forms.contactform.company.focus();
return false;
}
if(document.forms.contactform.email.value == "")
{
alert("Please provide an Email address.");
document.forms.contactform.email.focus();
return false;
}else{
var validformat=validateemail();
if(validformat==false)
{
return false;
}}
if(document.forms.contactform.phone.value=="")
{
alert("Please provide a phone number in the format 999-999-9999.");
document.forms.contactform.phone.focus();
return false;
}
else if(document.forms.contactform.phone.value.length < 12)
{
alert("Please provide the phone number in the format of 999-999-9999.");
document.forms.contactform.phone.focus();
return false;
}
else
{
var validnumber=validatephonenumber();
if(validnumber==false)
{
return false;
}}
if(document.forms.contactform.msg.value=="")
{
alert("Please provide a message.");
document.forms.contactform.msg.focus();
return false;
}
return(true);
}
It's unclear without more code but based on your comment I am going to guess that you have incorrectly written your php and it's breaking your javascript/html code. Perhaps one of your quotes? Look at the source code of the page and run it through one of the online validation services such as http://validator.w3.org and http://www.jslint.com
Try this:
PHP HTML:
<?php
echo "<form name='contactform' id='contactform' method='post'
action='' onsubmit='return validateentry(this);'>"
...
Validation JavaScript:
function validateemail(e)
{
var emailentry = e.value
, at = emailentry.indexOf("#")
, period = emailentry.lastIndexOf(".");
if(at < 1 || ( period - at < 2 ))
{
alert("Please enter correct email in the format of 'yourmail#yourwebsite.com'")
e.focus();
return false;
}
return true;
}
function validatephonenumber(e)
{
var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/
, numbers = e.value;
if (!re.exec(numbers))
{
alert("Please enter a phone number in the format of 999-999-9999");
e.focus();
return false;
}
return true;
}
function validateentry(f)
{
if(f.name.value == "")
{
alert("Please provide your name.");
f.name.focus();
return false;
}
if(f.company.value == "")
{
alert("Please provide your company name. If you don't have one, simply state
that you don't.");
f.company.focus();
return false;
}
if(f.email.value == "")
{
alert("Please provide an Email address.");
f.email.focus();
return false;
}
else
{
var validformat = validateemail(f.email);
if(validformat == false)
{
return false;
}
}
if(f.phone.value == "" || f.phone.value.length < 12 || (validnumber = validatephonenumber(f.phone)) == false)
{
alert("Please provide the phone number in the format of 999-999-9999.");
f.phone.focus();
return false;
}
if(f.msg.value == "")
{
alert("Please provide a message.");
f.msg.focus();
return false;
}
return true;
}

function does not always return a value?

I am trying to make this ajax request function work but netbeans is giving a warning that the following function does not always return a value. Can anyone please help.
function fpform(){
var response='';
var fpemail = $('#frgtpwd').val();
//var fpemail = document.getElementById('frgtpwd').value;
if (fpemail == ""){
$('span#fperror').text("insert your emal address");
//document.getElementById('fperror').innerHTML = "Insert your email address";
return false;
} else {
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(fpemail)==false) {
$('span#fperror').text("Email address is not in valid format");
//document.getElementById('fperror').innerHTML = "Email address is not in valid format";
return false;
} else {
$("#loader").html('<img src="images/ajax-loader.gif" />');
$.post("forgot_password_process.php", {
email:fpemail
}, function(response){
response = response.trim();
}).success(function () {
if (response == 'yes'){
$("#fperror").html('<font color="green"><b>Your password has been reset now and emailed to you </b></font>');
$("#loader").hide('<img src="images/ajax-loader.gif" />');
return true;
} else {
alert("your email address was not found");
$("#loader").hide('<img src="images/ajax-loader.gif" />');
$("#fperror").html('<font color="black"><b> Email address was not found in database!</b></font>');
return false;
}
});
}
}
}
The return true; statement in your code is not returning from fpform. It is instead returning from the callback function given to .success(). By the time this function is executed, the outer function, fpform, has long since returned. The only way to "return" from a function using ajax is with a callback.
Before I give you any code, you've made a bunch of other mistakes:
Your email regex, /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, fails on my email address. + is a valid character as well. Consider not validating email addresses with regex.
$("#loader").hide('<img src="images/ajax-loader.gif" />') does not work. At all. You want $("#loader").empty()
The variable response you declare at the top is shadowed by your argument response in one of your anonymous functions, making response = response.trim() have no effect whatsoever.
function fpform(callback) {
var fpemail = $('#frgtpwd').val();
if (fpemail == ""){
$('span#fperror').text("insert your email address");
callback(false);
} else {
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(fpemail)==false) {
$('span#fperror').text("Email address is not in valid format");
callback(false);
} else {
$("#loader").html('<img src="images/ajax-loader.gif" />');
$.post("forgot_password_process.php", {
email:fpemail
}).success(function(response) {
response = response.trim();
if (response == 'yes'){
$("#fperror").html('<font color="green"><b>Your password has been reset now and emailed to you </b></font>');
$("#loader").hide('<img src="images/ajax-loader.gif" />');
callback(true);
} else {
alert("your email address was not found");
$("#loader").hide('<img src="images/ajax-loader.gif" />');
$("#fperror").html('<font color="black"><b> Email address was not found in database!</b></font>');
callback(false);
}
}).error(function() { callback(false); });
}
}
}
You should return value after $.post(...).success(...);

Categories