Jquery form validation coding - javascript

My Jquery validation is not working, below is the script coding. I am getting a
Fatal error: Uncaught exception
error and not sure why. I know one of the reasons can be the validation code isnt correct. Is the coding correct or is there errors?
<script type="text/javascript">
$('form#contact').submit(function(e) {
var isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/.test(jQuery('#form_zip').val());
var isValidYear = /^\d{4}$/.test(jQuery('#gradDate').val());
var year_number = parseInt(jQuery('#gradDate').val());
var isValidEmail = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(jQuery('#form_email').val());
var first_name = jQuery.trim(jQuery('#first_name').val());
var last_name = jQuery.trim(jQuery('#last_name').val());
var form_email = jQuery.trim(jQuery('#form_email').val());
var street = jQuery.trim(jQuery('#street').val());
var city = jQuery.trim(jQuery('#city').val());
var state = jQuery.trim(jQuery('#state').val());
var isValidPhone = /^[2-9]\d{2}[2-9]\d{2}\d{4}$/.test(jQuery('#phone_day').val());
function validZip(zip)
{
if (zip.match(/^[0-9]{5}$/)) {
return true;
}
zip=zip.toUpperCase();
if (zip.match(/^[A-Z][0-9][A-Z][0-9][A-Z][0-9]$/)) {
return true;
}
if (zip.match(/^[A-Z][0-9][A-Z].[0-9][A-Z][0-9]$/)) {
return true;
}
return false;
}
if(!validZip(jQuery('#form_zip').val())){
alert('Please enter a valid Zip Code.');
}
else if(!isValidYear || (year_number > <?php echo date('Y')?>)){
alert('Please enter a valid High School Graduation Year.');
}
else if(!isValidEmail (jQuery('#form_email').val())){
alert('Please enter a valid Email Address.');
}
else if(first_name.length <= 0 || first_name == 'First Name' || (!first_name.match(/[a-zA-Z]/)) || (first_name.match(/[0-9]/))){
alert('Please enter your First Name.');
}
else if(last_name.length <= 0 || last_name == 'Last Name' || (!last_name.match(/[a-zA-Z]/)) || (last_name.match(/[0-9]/))){
alert('Please enter your Last Name.');
}
else if(street.length <= 0 || street == 'Street Address'){
alert('Please enter your Street Address.');
}
else if(city.length <= 0 || city == 'City'){
alert('Please enter your City.');
}
else if(state.length <= 0 || state == 'State'){
alert('Please enter your State by 2 letter abbreviation.');
}
else if(country.length <= 0 || country == 'Other'){
alert('Please enter your Country.');
}
else if(!isValidPhone){
alert('If your phone number is correct, close this box and then Click the button in the form.');
}
else {
$('form#mainform').submit();
}
return false;
}
return false;
}
});
</script>

You have php inside your JavaScript code:
else if(!isValidYear || (year_number > <?php echo date('Y')?>)){

Related

Console log for foreach javascript didn't show up

I've been trying to work on some validation in javascript, just a simple one. But, the error can't show up in the console log. If all the inputs are correct, it will show the "Registration success text" but in the other side, it won't show any of the error text. But it somehow still can get the focus function to the wrong input, only the error texts that are not showing up in the console. I am so confused. Can you guys help me? I'd appreciate that.
function validate(name, uname, email, passw, confpassw, region, gender, termss){
let error = [];
if(name.value === ''){
error.push("Name is required.");
name.focus();
return false;
}
if(name.value.length < 4){
error.push("Length of name is less than 4 characters.");
name.focus();
return false;
}
if(uname.value === ''){
error.push("Username is required.");
uname.focus();
return false;
}
if(uname.value.length < 8 || uname.value.length > 14){
error.push("Length of username must between 8-14 characters.");
uname.focus();
return false;
}
if(email.value === ''){
error.push("Email is required.");
email.focus();
return false;
}
if((email.value.indexOf('#') == -1 && email.value.indexOf('.') == -1) ||
(!email.value.endsWith('gmail.com') && (!email.value.endsWith('gmail.co.id')))
|| email.value.indexOf('#')+1 === email.value.indexOf('.')){
error.push("Email is not valid.");
return false;
}
if(passw.value === ''){
error.push("Password is required.");
passw.focus();
return false;
}
if(confpassw.value === ''){
error.push("Confirmation Password is required.");
confpassw.focus();
return false;
}
if(passw.value != confpassw.value){
error.push("The password didn't match.");
passw.focus();
confpassw.focus();
return false;
}
if(region.value == 0){
error.push("Region is not selected");
region.focus();
return false;
}
if(gender.value == 0){
error.push("Gender is not selected");
gender.focus();
return false;
}
if(!termss.checked){
error.push("Please agree to the terms and conditions if you want to proceed.");
termss.focus();
return false;
}
if(error.length == 0){
alert("Registration Success!");
} else{
for(var i=0; i<error.length; i++){
console.log(error.length[i]);
};
}
}
You are returning too early so it is never reaching your consoles. You are focusing on multiple fields.
if(passw.value != confpassw.value){
error.push("The password didn't match.");
passw.focus();
confpassw.focus();
return false;
}
You are also doing console.log(error.length[i]); instead of console.log(error[i]);.
function validate(name, uname, email, passw, confpassw, region, gender, termss){
let error = [];
let firstFailedField = null;
const setFirstFailedField = (field) => {
if (!firstFailedField) firstFailedField = field;
};
if(name.value === ''){
error.push("Name is required.");
setFirstFailedField(name);
}
if(name.value.length < 4){
error.push("Length of name is less than 4 characters.");
setFirstFailedField(name);
}
if(uname.value === ''){
error.push("Username is required.");
setFirstFailedField(uname);
}
if(uname.value.length < 8 || uname.value.length > 14){
error.push("Length of username must between 8-14 characters.");
setFirstFailedField(uname);
}
if(email.value === ''){
error.push("Email is required.");
setFirstFailedField(email);
}
if((email.value.indexOf('#') == -1 && email.value.indexOf('.') == -1) ||
(!email.value.endsWith('gmail.com') && (!email.value.endsWith('gmail.co.id')))
|| email.value.indexOf('#')+1 === email.value.indexOf('.')){
error.push("Email is not valid.");
setFirstFailedField(email);
}
if(passw.value === ''){
error.push("Password is required.");
setFirstFailedField(passw);
}
if(confpassw.value === ''){
error.push("Confirmation Password is required.");
setFirstFailedField(confpassw);
}
if(passw.value != confpassw.value){
error.push("The password didn't match.");
setFirstFailedField(confpassw);
}
if(region.value == 0){
error.push("Region is not selected");
setFirstFailedField(region);
}
if(gender.value == 0){
error.push("Gender is not selected");
setFirstFailedField(gender);
}
if(!termss.checked){
error.push("Please agree to the terms and conditions if you want to proceed.");
setFirstFailedField(termss);
}
if(error.length == 0){
alert("Registration Success!");
return true;
}
error.forEach((err) => (console.log(err)));
if (firstFailedField && typeof firstFailedField.focus === 'function') firstFailedField.focus();
return false;
}

javascript validation not reading other conditions on my if else if

what could be wrong I tried to validate the input fields name, company_name, password, when I'm on the password field it says password should not be empty but I already inputted some characters on the password input field.
it doesn't seem to read the validation for password.length and password != confirm_password condition on my else if
here's my code
$('#button-parent a').bind('click',function(e){
var $this = $(this);
var prev = current;
var name = document.getElementById('name').value;
var company_name = document.getElementById('company_name').value;
var password = document.getElementById('password').value;
var confirm_password = document.getElementById('confirm_password').value;
var email = document.getElementById('email').value;
if( name == null || name == "") {
alert('name is required');
return false;
} else if( name.length < 5) {
alert('name must be atleast 6 characters');
return false;
} else if( company_name == null || company_name == ""){
alert('company name is required');
return false;
} else if ( password == null || password == ""){
alert('password field should not be empty');
return false;
} else if ( password.length < 8 ) {
alert('password must be atleast 8 characters');
return false;
} else if ( password != confirm_password ) {
alert('Password do not match');
return false;
}
rIf you are using jQuery why don't you get the values from $() selector?
$(function() {
$('#button-parent a').bind('click', function(e) {
var $this = $(this);
var prev = current;
var name = $('#name').val();
var company_name = $('#company_name').val();
var password = $('#password').val();
var confirm_password = $('#confirm_password').val();
var email = $('#email').val();
var errorMsg = '';
if (name == null || name == "") {
errorMsg += 'name is required\n';
}
if (name.length < 5) {
errorMsg += 'name must be atleast 6 characters\n';
}
if (company_name == null || company_name == "") {
errorMsg += 'company name is required\n';
}
if (password == null || password == "") {
errorMsg += 'password field should not be empty\n';
}
if (password.length < 8) {
errorMsg += 'password must be atleast 8 characters\n';
}
if (password != confirm_password) {
errorMsg += 'Password do not match';
}
if (errorMsg != '') {
alert(errorMsg);
return false;
}
});
});
This way you can show all the errors in the form at once and the users will not be irritated at all.
You can try to use the following line of code instead since you are using jQuery.
var password = $('#password').val();
For a quick check to see if this line works, you can type and run this command at the console section of the developer tool. If it works you should be seeing the input value.

How to I validate a password using regular expressions in javascript?

This is my code. It functions perfectly up to the password validation. It completely ignores my null test and goes straight to the actual validation but then refuses to go past it and keeps giving me my invalid password alert. Any ideas as to how to fix this issue?
function validate(){
var l = document.getElementById('lname').value;
var f = document.getElementById('fname').value;
var e = document.getElementById('email').value;
var e2 = document.getElementById('cemail').value;
var u = document.getElementById('newuser').value;
var p = document.getElementById('newpass');
var p2 = document.getElementById('cnewpass');
var str = new RegExp(/[a-zA-Z]{1,30}$/);
var em = new RegExp(/[a-z0-9._-]+#[a-z]+\.[a-z]{1,30}$/);
var pass = new RegExp(/[a-zA-Z0-9]{1,15}$/);
if (l == null || l == ""){
alert("Please enter your last name");
return false;
}
var ln = str.test(l);
if(ln==false){
alert("Invalid Name.");
documents.forms['registration']['lname'].focus;
return false;
}
if (f == null || f == ""){
alert("Please enter your first name");
return false;
}
var fn = str.test(f);
if(fn==false){
alert("Invalid Name.");
documents.forms['registration']['fname'].focus;
return false;
}
if (e == null || e == "") {
alert("Please enter an email address");
return false;
}
if (e2 == null || e2 == "") {
alert("Please enter an email address");
return false;
}
var eml = em.test(e);
if(eml==false){
alert("Invalid Email.");
documents.forms['registration']['email'].focus;
return false;
}
var eml2 = em.test(e2);
if(eml2==false){
alert("Invalid Email.");
documents.forms['registration']['cemail'].focus;
return false;
}
if(e2!=e){
alert("Please ensure that the emails match.");
return false;
}
if (u == null || u == "") {
alert("Please enter a user name");
return false;
}
var un = str.test(u);
if(un==false){
alert("Invalid user name");
documents.forms['registration']['newuser'].focus;
return false;
}
if (p == null || p == "") {
alert("works");
alert("Please enter a password");
return false;
}
if (p2 == null || p2 == "") {
alert("Please enter a password");
return false;
}
var pwrd = pass.test(p);
if(pwrd==false){
alert("Invalid Password.");
documents.forms['registration']['newpass'].focus;
return false;
}
if(p2!=p){
alert("Please ensure that the passwords match");
documents.forms['registration']['cnewpass'].focus;
return false;
}
}
You should amend js code that retriving data from from. Look,
var p = document.getElementById('newpass');
var p2 = document.getElementById('cnewpass');
Here You are trying to get NOT values of input tags, you are trying to get tag.
So You should replace above code with:
var p = document.getElementById('newpass').value;
var p2 = document.getElementById('cnewpass').value;
I hope it will help you
You should pass the value of password fields.
try changing the code to
var p = document.getElementById('newpass').value;
var p2 = document.getElementById('cnewpass').value;

Javascript Email Validation from Form Field suddenly doesn't work?

Working on a web page which used to have a working email validation, but after adding in a few additional features it suddenly no longer works. The page shouldn't proceed unless all fields are valid, everything is basically client-side if you're wondering why it's a bit of a weird website.
Originally the e-mail validation worked for if the field was blank or did not have an '#' and '.' following it, using the code:
if (d==null || d=="")
{
document.forms["registration"]["email"].focus();
alert("Please enter your email address");
return false;
}
else
{
var emailAddress = d;
var atLoc = emailAddress.indexOf("#",1);
var dotLoc = emailAddress.indexOf(".",atLoc+2);
var len = emailAddress.length;
if (atLoc > 0 && dotLoc > 0 && len > dotLoc+2)
{
return true;
}
else
{
alert("Invalid E-mail address format! Please enter your e-mail address again.");
document.forms["registration"]["email"].focus();
return false;
}
}
However, added with the entire code of:
function validateForm(){
{
var f=document.forms["registration"]["FirstName"].value;
var a=document.forms["registration"]["Surname"].value;
var b=document.forms["registration"]["address"].value;
var c=document.forms["registration"]["post"].value;
var d=document.forms["registration"]["email"].value;
var z=document.forms["registration"]["password"].value;
if (f==null || f=="")
{
document.forms["registration"]["FirstName"].focus();
alert("Please enter your first name");
return false;
}
if (a==null || a=="")
{
document.forms["registration"]["Surname"].focus();
alert("Please enter your surname");
return false;
}
if (b==null || b=="")
{
alert("Please enter your address");
document.forms["registration"]["address"].focus();
return false;
}
if (c==null || c=="")
{
alert("Please enter your postcode");
document.forms["registration"]["post"].focus();
return false;
}
if (d==null || d=="")
{
document.forms["registration"]["email"].focus();
alert("Please enter your email address");
return false;
}
else
{
var emailAddress = d;
var atLoc = emailAddress.indexOf("#",1);
var dotLoc = emailAddress.indexOf(".",atLoc+2);
var len = emailAddress.length;
if (atLoc > 0 && dotLoc > 0 && len > dotLoc+2)
{
return true;
}
else
{
alert("Invalid E-mail address format! Please enter your e-mail address again.");
document.forms["registration"]["email"].focus();
return false;
}
}
}
}
It no longer works...? Puzzled, any help appreciated.

Conditional valdiation of required fields

I have a page where the user enters their address. I want to make city, state and zip code required fields, but here's the catch. Either the user is required to enter both the city and the state OR they are required to enter the zip code. How do I do this javascript?
For now I have
function Form(f) {
for (var n = 0; n < f.elements.length; n++) {
if ((f.elements[n].name).indexOf("zip_code") > -1) {
var zipcode = f.elements[n].value;
if (zipcode.length == "") {
if ((f.elements[n].name).indexOf("cityname") > -1) {
var city = f.elements[n].value;
if (city.length == "") {
alert("Enter City name");
break;
}
}
if ((f.elements[n].name).indexOf("statename") > -1) {
var state = f.elements[n].value;
if (state.length == "") {
alert("Enter State name");
break;
}
}
} else {
//return true; then do something
return false;
}
} else if (zipcode.length == "") {
alert("Enter zipcode");
break;
return false;
}
}
}
Can you please try this?
function Form(f) {
var cityname = document.getElementsByName('cityname')[0].value;
var statename = document.getElementsByName('statename')[0].value;
var zip_code = document.getElementsByName('zip_code')[0].value;
if( (cityname.length==0 && statename.length==0 ) ){
if(zip_code.length==0){
alert("Enter zipcode");
return false;
}
return true;
}else if( (cityname.length==0 || statename.length==0 ) ){
if (cityname.length == 0) {
alert("Enter City name");
return false;
}else if (statename.length == 0) {
alert("Enter State name");
return false;
}
return true;
}
}
Something like this should help
if( zipcode.length){
/* validate zipcode*/
}else{
if( city.length && state.length){
}else{
/* must have city and state*/
}
}
use a variable flag.
flag = 0;
if city and state
make flag as 1
if zip
make flag as 1
if flag==0 then validation failed
else allow to submit form

Categories

Resources