JS validation error firing even when no value is being entered - javascript

I have a problem where I have 3 input fields. The first field is for the username and the other two fields are for password validation. Now the password fields cannot contain the user name field so I have written the logic to display a message if the password fields contains any part of the user name. However if the user name field has nothing in it, that same validation message is still firing if something is typed in the password field.
Here is the code
Code getting the user name field:
if (document.getElementById("tUserName")) {
uN = document.getElementById("tUserName").value;
}
else {
uN = "";
}
The user name field regEx:
containsUsername = new RegExp(uN);
this is the code that is responsible for the validation error message:
if (document.getElementByIdd("tUserName")) {
if (containsUsername.test(value)) {
dojo.addClass(dojo.byId('result-userName'), 'hide');
}
else {
dojo.removeClass(dojo.byId('result-userName'), 'hide');
}
}

I'm worried that I must be missing the point here so bear with me if I am....
So you want the validation error not to show when they type in passwords without anything in the username field?
Can you not just check that the username has a value of something other than an empty string before you try running it through the regex?
if (document.getElementById("tUserName")) {
if (document.getElementById("tUserName").value != '' && containsUsername.test(value)) {
dojo.addClass(dojo.byId('result-userName'), 'hide');
}
else {
dojo.removeClass(dojo.byId('result-userName'), 'hide');
}
}

Related

Email validation / remove class

I have a contact form in which missing fields and invalid fields are highlighted in red. All is working well apart from the email validation field. The issue I face is that when the user inputs an invalid email address into the email input field and submits the input field is highlighted red (perfect!), however when the user re-enters with a valid email address and submits the highlighted border remains.
function validateEmail(email) {
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test(email);
}
$("#contactForm").submit(function(event) {
$("#email").removeClass("border-red");
if (!validateEmail("#email")) {
$("#email").addClass("border-red");
}
});
You need to pass the value of #email input to validateEmail function
if (!validateEmail($("#email").val()){
}
$("#contactForm").submit(function(event)
{
$("#email").removeClass("border-red");
if (!validateEmail($("#email").val())
{
$("#email").addClass("border-red");
}
});

Two text fields, only one required to be filled (either)

So I have two fields in my webpage, one for telephone number and the other for email address, I need to make either one of them required to be filled by using JavaScript NOT jQuery. Most of the answers I found here are for jQuery, any solutions with JavaScript would be much appreciated. Thanks!
function User_one(){
var phone = document.getElementById('PhoneText2').value;
var mail = document.getElementById('EmailText1').value;
if (phone && mail == ""){
alert("An error occurred.");
}else{
return false;
}
}
Update with actual code
Here's how I'd do it
(function () {
document.getElementById('myForm').addEventListener('submit', function(event){
// Get the length of the values of each input
var phone = document.getElementById('PhoneText2').value.length,
email = document.getElementById('EmailText1').value.length;
// If both fields are empty stop the form from submitting
if( phone === 0 && email === 0 ) {
event.preventDefault();
}
}, false);
})();
Since you haven't supplied any code for us to work with, I'll answer in pseudo-code:
On form submission {
If (both telephone and email is empty) {
throw validation error
}
otherwise {
submit the form
}
}
If you show me your code I'll show you mine :-)

Anyone of two textfield validation

I have a forgot password form. It has two fields 1) email and 2) mobile. So what I need is a validation for it. like both field should not be empty, both field should not be filled, any one only should be filled. email should be in email format and mobile should only contain numbers.
javascript Code:
function validate_fgtmgrpwd(){
var adminid=document.f_mgr_password.mgrid;
var adminmobile=document.f_mgr_password.mgrmobile;
var mgr_length=document.f_mgr_password.mgrmobile.value;
if ((document.f_mgr_password.mgrid=="Ex: ManagerID#Email.com")||
(document.f_mgr_password.mgrid==""))
{}
{document.getElementById("validationMessage").innerHTML=" <font color='#FF0000'>Error: </font> Please Enter Either Email Id Or Mobile No:!";
popup('validationPopup');
mgrid.focus();
return false;
}
}
You should do the validation server side, not client side. There are always ways to get around your javascript form validation.
So you should check/validate the POST values in your php script, and act accordingly.
With html5 you can define an input type="email" for your email field ( so it parse properly inserted email ) and an input type="tel" for your mobile phone field. So, set the clear field at onfocus event for the other field. this should works fine.
Try this:
function validate_fgtmgrpwd() {
var adminid = document.f_mgr_password.mgrid,
adminmobile = document.f_mgr_password.mgrmobile,
emailExp = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/gi,
phoneExp = /^[0-9\-\+]{9,15}$/gi;
if(!adminid.value.length && !adminmobile.value.length){
alert("At Least one field is mandatory!");
adminid.focus();
return false;
} else {
if(adminid.value.length && !emailExp.test(adminid.value)){
alert("Enter a valid email");
adminid.focus();
return false;
} else if(adminmobile.value.length && !phoneExp.test(adminmobile.value)) {
alert("Enter a valid phone number");
adminmobile.focus();
return false;
} else {
return true;
}
}
}
For HTML5 supporting browsers, native validation will work and for other browsers, custom validation will work.
jsfiddle: http://jsfiddle.net/MR6bD/2/

validate forms fields with javascript gen_validatorv4.js

I'm using gen_validatorv4.js from javascript-coder.com for validating forms. I love it because it's very simple to set up for normal use. But now I have run into a setup I can't fix.
This is what I'm trying to do. I have a form to edit users with fields for name, username and password etc. The problem is that I want the script to validate the password fields only when it's not empty.
I have tried this way but it doesn't work:
function DoCustomValidation() {
var frm = document.forms["edit_validate"];
if(frm.uPass.value != '') {
frmvalidator.addValidation("uPass","minlen=8","Minimum 8 characters")
frmvalidator.addValidation("uPass2","req","Passwords missing");
frmvalidator.addValidation("uPass2","eqelmnt=uPass","Password fields doesn't match");
frmvalidator.addValidation("uPass","neelmnt=uName","User name and password can't be the same");
return true;
} else {
return false;
}
}
frmvalidator.setAddnlValidationFunction(DoCustomValidation);
Any Idea anyone?
Regards Per
Just found this on ehow!
frmvalidator.addValidation("PASSWORD2","eqelmnt=PASSWORD",
"The confirmed password is not same as password");

how to remove error text from the email format checker code?

I have been writing a code for validating forms using javascript/jquery. Following is a code snippet for checking email format. The problem is when I enter invalid email, it recognizes it, but when I go back to this field and enter correct email, the error text still stays even though I have used the 'else' part. How do I remove the error text in this case?
if(e1.value!=''){
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.signupForm.email1.value.search(emailRegEx) == -1) {
$("#err_email1").html("Please enter valid email address.");
}
status=0;
}
else{
$("#err_email1").html("");
status=1;
}
Your else block to run the code which removes the error message is only running when the email field is blank, which is presumably not what you want, try the edit below.
if(e1.value!='')
{
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.signupForm.email1.value.search(emailRegEx) == -1) {
$("#err_email1").html("Please enter valid email address.");
status=0;
}
else
{
$("#err_email1").html("");
status=1;
}
}

Categories