$(document).ready(function(){ // Place ID's of all required fields in the array. required=["formname","formemail"]; email = $("#formemail"); name = $("#formname"); errornotice = $("#error"); // The text to show up within a field when it is incorrect emptyerror = "Please fill out this field."; emailerror = "Please enter a valid e-mail."; $("#suggestionform").submit( function(){ //validate required fields for(i = 0; i < required.length; i++){ var input = $('#'+required[i]); if( (input.val() == "") || (input.val() == emptyerror)){ input.addClass("needsfilled"); input.val(emptyerror); errornotice.fadeIn(750); }else { input.removeClass("needsfilled"); } } if( !/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){ email.addClass("needsfilled"); email.val(emailerror); } if ( "" == name.val()){ name.addClass("needsfilled"); name.val(emptyerror); } if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() + $("#textarea1").val() + $("#textarea2").val() == "") { errornotice.fadeIn(750); alert("returning fail") return false; } if( $(":input").hasClass("needsfilled")){ alert("returning fail here") return false; }else{errornotice.hide();return true;} }); $(":input").focus( function(){ if ($(this).hasClass("needsfilled")){ $(this).val(""); $(this).removeClass("needsfilled"); } }) });
Register and join over 40,000 other developers!
Recent Topics
-
The Game You Are Waiting For?
WendellHarper - Dec 06 2020 01:21 PM
-
Quora and Reddit Backlinks
WendellHarper - Dec 06 2020 01:14 PM
-
Delete account
pindo - Jul 23 2020 01:33 AM
-
Print specific values from dictionary with a specific key name
Siten0308 - Jun 20 2019 01:43 PM
-
Learn algorithms and programming concepts
johnnylo - Apr 23 2019 07:49 AM
Recent Blog Entries
Recent Status Updates
Popular Tags
- networking
- Managed C++
- stream
- console
- database
- authentication
- Visual Basic 4 / 5 / 6
- session
- Connection
- asp.net
- import
- syntax
- hardware
- html5
- array
- mysql
- java
- php
- c++
- string
- C#
- html
- loop
- timer
- jquery
- ajax
- javascript
- programming
- android
- css
- assembly
- c
- form
- vb.net
- xml
- linked list
- login
- encryption
- pseudocode
- calculator
- sql
- python
- setup
- help
- game
- combobox
- binary
- hello world
- grid
- innerHTML

8 replies to this topic
#1
Posted 12 May 2012 - 06:27 AM
I am using a script to validate a few form fields before the form is submitted. The script is supposed to return false if the validation failed. On linux the script works fine in FF, Chrome and Opera. On windows the script fails and the form is submitted on Chrome, Safari and IE. Your taughts will be appreciated.
#2
Posted 12 May 2012 - 02:36 PM
can you also post your html form where you use this? The problem might be there. Because your javascript code should work
Life has no CTRL+Z
Never Forget To HIT "LIKE" If I Helped
Never Forget To HIT "LIKE" If I Helped
#3
Posted 14 May 2012 - 07:10 AM
Overview of the form:
The following is the changes I have made to the code.
With the above changes the form submission is aborted (as expected) if the validation fails in IE, Opera and FF on windows, Chrome and safari still submits the form. I don't have direct access to my code from work, but I believe the problem is stemming from this piece of code:
<form method="post" action="suggestions/suggestions-receive.php" id="suggestionform" onsubmit="return suggestionSubmit(this);"> <input type="submit" value="Submit" style="width:100px"/>
The following is the changes I have made to the code.
Version 2 var required=["formname","formemail"]; var email = $("#formemail"); var name = $("#formname"); var errornotice = $("#error"); // The text to show up within a field when it is incorrect var emptyerror = "Please fill out this field."; var emailerror = "Please enter a valid e-mail."; function suggestionSubmit(theform){ required=["formname","formemail"]; email = $("#formemail"); name = $("#formname"); errornotice = $("#error"); // The text to show up within a field when it is incorrect emptyerror = "Please fill out this field."; emailerror = "Please enter a valid e-mail."; for(i = 0; i < required.length; i++){ var input = $('#'+required[i]); if( (input.val() == "") || (input.val() == emptyerror)){ input.addClass("needsfilled"); input.val(emptyerror); errornotice.fadeIn(750); } else { input.removeClass("needsfilled"); } } if( !/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){ email.addClass("needsfilled"); email.val(emailerror); } if ( "" == name.val()) { name.addClass("needsfilled"); name.val(emptyerror); } if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() + $("#textarea1").val() + $("#textarea2").val() == "") { errornotice.fadeIn(750); return false } if( $(":input").hasClass("needsfilled")){ return false; } else{errornotice.hide();return true;} }
With the above changes the form submission is aborted (as expected) if the validation fails in IE, Opera and FF on windows, Chrome and safari still submits the form. I don't have direct access to my code from work, but I believe the problem is stemming from this piece of code:
if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() + $("#textarea1").val() + $("#textarea2").val() == "") { errornotice.fadeIn(750); return false } if( $(":input").hasClass("needsfilled")){ return false; }
#4
Posted 16 May 2012 - 06:10 AM
Don't you need $.each(...) there as the selector will return a collection / array?
if( $(":input").hasClass("needsfilled"))
$.each(collection, function(){
// use this to access the single input-element
});
#5
Posted 17 May 2012 - 03:42 PM
Extremely frustrated
I can't seem to get basic functionality out of the script.
The inputs fields 'name' and 'email' both are of the class 'form-required'
This outputs nothing:
Testing the code like this
I even added the input selector ":input"
TIRED
My lack of a formal understanding for JQuery is frustrating my efforts
I can't seem to get basic functionality out of the script.
The inputs fields 'name' and 'email' both are of the class 'form-required'
This outputs nothing:
$('.form-required').each( function(index){ alert(index + ': ' + $(this).tagName.toLowerCase()); })Nothing with this either:
$.each('.form-required',function(){ alert( $(this).tagName.toLowerCase()); })
Testing the code like this
alert("this far"); $('.form-required').each( function(index){ alert(index + ': ' + $(this).tagName.toLowerCase()); }) $.each('.form-required',function(){ alert( $(this).tagName.toLowerCase()); }) alert("further");only outputs "this far" -- it seems the form is submitted before
alert ("further");
I even added the input selector ":input"
alert("this far"); $('.form-required').each( function(index){ alert(index + ': ' + $(this).tagName.toLowerCase()); }) $.each('.form-required',function(){ alert( $(this).tagName.toLowerCase()); }) $.each(':input',function(){ alert("here " + $(this).tagName.toLowerCase()); }) alert("further");still no output and the form submits before
alert("further");
TIRED

My lack of a formal understanding for JQuery is frustrating my efforts
#6
Posted 17 May 2012 - 04:27 PM
What is amazingly surprising is basic selection does not stop the form from submitting on Chrome and Safari either.
if( $("#formname").hasClass("needsfilled") || $("#formemail").hasClass("needsfilled") ) { alert("failed"); return false; }This works on Opera, IE and FF.
#7
Posted 17 May 2012 - 10:25 PM
This works:
<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var errornotice = $("#error"); // The text to show up within a field when it is incorrect var emptyerror = "Please fill out this field."; var emailerror = "Please enter a valid e-mail."; function suggestionSubmit(theform){ var required=["name","email"]; var email = $("#email"); var name = $("#name"); var errornotice = $("#error"); // The text to show up within a field when it is incorrect emptyerror = "Please fill out this field."; emailerror = "Please enter a valid e-mail."; for(i = 0; i < required.length; i++){ var input = $('#'+required[i]); if( (input.val() == "") || (input.val() == emptyerror)){ input.addClass("needsfilled"); input.val(emptyerror); errornotice.fadeIn(750); } else { input.removeClass("needsfilled"); } } if( !/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){ email.addClass("needsfilled"); email.val(emailerror); } if ( "" == name.val()) { name.addClass("needsfilled"); name.val(emptyerror); } if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() + $("#textarea1").val() + $("#textarea2").val() == "") { errornotice.fadeIn(750); return false } if( $(":input").hasClass("needsfilled")){ return false; } else { errornotice.hide(); return true; } } </script> <style type="text/css"> .needsfilled{ background-color: red; } </style> </head> <body> <div id="error" style="display:none;"> <p>Error</p> </div> <form onsubmit="return suggestionSubmit(this);"> <label>name:<input id="name" type="text"/></label><br/> <label>email:<input id="email" type="text"/></label><br/> <label>textarea1:<input id="textarea1 type="textarea"/></label><br/> <label>textarea2:<input id="textarea2" type="textarea"/></label><br/> <label>link1:<input id="link1" type="text"/></label><br/> <label>link2:<input id="link2" type="text"/></label><br/> <label>link3:<input id="link3" type="text"/></label><br/> <label>link4:<input id="link4" type="text"/></label><br/> <input type="submit" value="submit"/> </form> </body> </html>The only thing I had to change was
email = $("#email"); name = $("#name"); errornotice = $("#error");You didn't put 'var' to declare it.
#8
Posted 18 May 2012 - 04:50 AM
Ok. I only have access to IE8 on work, so i will check when i reach home (if the internet is working).
#9
Posted 19 May 2012 - 03:08 AM
Was in fact the problem. Problem Solved. Much thanks.You didn't put 'var' to declare it.
Also tagged with one or more of these keywords: JQuery, formsummission, Browsers
Language Forums →
HTML, CSS and Javascript →
Jquery .hasClass not returning true for a classnameStarted by Wackostylee, 13 Oct 2018 ![]() |
|
![]() |
||
Language Forums →
HTML, CSS and Javascript →
Syntax and Reference Error?Started by Tonyobyo, 10 Jun 2016 ![]() |
|
![]() |
||
Language Forums →
HTML, CSS and Javascript →
JQuery/NodeJS AJAX Response HelpStarted by Poe, 27 Jan 2016 ![]() |
|
![]() |
||
Language Forums →
HTML, CSS and Javascript →
insert records using jquery and php not workingStarted by mutago, 12 Jul 2015 ![]() |
|
![]() |
||
![]() Call to script via ajax $.post fails unless followed by alert()Started by sayitblue, 11 Jul 2015 ![]() |
|
![]() |
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download