Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

form does nothing on submit

I have the following script, which validate my fields before submitting...validation works, but when the fields are filled...form does not get submitted. I get no error messages in the console, so I guess that from some reason, prevent_default prevents the form to be submitted, even that all fields are filled.

Here is the code:

 (function () {
 // list all variables used here...
 var 
 conForm = jQuery('#conForm'),
 fullname = jQuery('#fullname'),
 customeremail = jQuery('#customeremail'),
 phone = jQuery('#phone'),
 comments = jQuery('#comments');
 // funcktion for checking the e-mail address entered by the user
 function validateEmail(sEmail) {
 var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
 if (filter.test(sEmail)) {
 return true;
 } else {
 return false;
 }
 }
 // on exit, check if the user lef the first name emty 
 fullname.on('blur', function(e){
 var tempval = document.getElementById('fullname').value;
 if(fullname.val()==''){
 //jQuery("#p_username").focus();
 jQuery('#fullname').addClass('bordered2'); 
 jQuery('#fullname').removeClass('good_input'); 
 jQuery("#fullname").attr("placeholder", "Εισάγετε το όνομα σας").placeholder();
 e.preventDefault();
 } else {
 jQuery('#fullname').removeClass('bordered2'); 
 }
 });
 // check if the email entered is valid email address when exit the field
 customeremail.on('blur',function(e) {
 var sEmail = jQuery('#customeremail').val();
 if (jQuery.trim(sEmail).length == 0) {
 // if user leave the field empty
 //jQuery("#customeremail").focus();
 jQuery('#customeremail').removeClass('good_input'); 
 jQuery('#customeremail').addClass('bordered2'); 
 jQuery("#customeremail").attr("placeholder", "Εισάγετε το email σας").placeholder();
 e.preventDefault();
 }
 if (validateEmail(sEmail)) {
 // if the e-mail is valid
 jQuery('#customeremail').removeClass('bordered2'); 
 jQuery('#customeremail').addClass('good_input'); 
 } else {
 // if the e-mail is NOT valid
 //jQuery("#customeremail").focus();
 jQuery('#customeremail').removeClass('good_input'); 
 jQuery('#customeremail').addClass('bordered2'); 
 sEmail = "";
 jQuery("#customeremail").val(sEmail);
 jQuery("#customeremail").attr("placeholder", "Εισάγετε υπαρκτό email").placeholder();
 e.preventDefault();
 }
 });
 // on exit, check if the user lef the phone emty 
 phone.on('blur', function(e){
 var tempval = document.getElementById('phone').value;
 if(phone.val()==''){
 //jQuery("#p_username").focus();
 jQuery('#phone').addClass('bordered2'); 
 jQuery('#phone').removeClass('good_input'); 
 jQuery("#phone").attr("placeholder", "Εισάγετε το τηλέφωνο σας").placeholder();
 e.preventDefault();
 } if (tempval.length != 10) {
 //jQuery("#p_username").focus();
 jQuery('#phone').addClass('bordered2'); 
 jQuery('#phone').removeClass('good_input'); 
 tempval = "";
 jQuery("#phone").val(tempval);
 jQuery("#phone").attr("placeholder", "Εισάγετε 10 αριθμούς χωρίς κενά").placeholder();
 e.preventDefault();
 } if(!jQuery.isNumeric(tempval)) {
 jQuery('#phone').addClass('bordered2'); 
 jQuery('#phone').removeClass('good_input');
 tempval = "";
 jQuery("#phone").val(tempval);
 jQuery("#phone").attr("placeholder", "Εισάγετε μόνο αριθμούς").placeholder();
 }
 if (tempval.length == 10) {
 jQuery('#phone').removeClass('bordered2'); 
 jQuery('#phone').addClass('good_input'); 
 } 
 });
 // user fill all fields as it should, so form can be submitted
 conForm.submit(function(e){ 
 e.preventDefault(); 
 // prevent user from hitting submit button with empty form.
 var tempval = document.getElementById('fullname').value;
 if(tempval.length ==0){
 //jQuery('#p_username').focus();
 jQuery('#fullname').addClass('bordered2'); 
 jQuery('#fullname').removeClass('good_input'); 
 jQuery("#fullname").attr("placeholder", "Εισάγετε το όνομα σας").placeholder();
 e.preventDefault();
 }
 var sEmail = jQuery('#customeremail').val();
 if (jQuery.trim(sEmail).length == 0) {
 // if user leave the field empty 
 jQuery('#customeremail').removeClass('good_input'); 
 jQuery('#customeremail').addClass('bordered2'); 
 jQuery("#customeremail").attr("placeholder", "Εισάγετε το email σας").placeholder();
 e.preventDefault();
 }
 if (validateEmail(sEmail)) {
 // if the e-mail is valid
 jQuery('#customeremail').removeClass('bordered2'); 
 jQuery('#customeremail').addClass('good_input'); 
 } else {
 // if the e-mail is NOT valid
 jQuery('#customeremail').removeClass('good_input'); 
 jQuery('#customeremail').addClass('bordered2'); 
 sEmail = "";
 jQuery("#customeremail").val(sEmail);
 jQuery("#customeremail").attr("placeholder", "Εισάγετε υπαρκτό email").placeholder();
 e.preventDefault();
 }
 var tempval = document.getElementById('phone').value;
 if(tempval.length ==0){
 //jQuery('#p_username').focus();
 jQuery('#phone').addClass('bordered2'); 
 jQuery('#phone').removeClass('good_input'); 
 jQuery("#phone").attr("placeholder", "Εισάγετε το τηλέφωνο σας").placeholder();
 e.preventDefault();
 }
 //return false; 
 })
}) ();

Can anyone help me to find out what is wrong with this script?

Regards, John

Answer*

The very first line in your `submit()` function is `e.preventDefault();`, which stops the form from following along it's natural submit logic, but you don't have any code in there to ever trigger the submit if the form passes validation.

I'd remove the first instance of `e.preventDefault();` and introduce a validation flag that defaults to `true`. Replace all of the other instances of `e.preventDefault();` with a line that sets the flag to `false` and then return the flag at the end of the code.

Like this:

 // user fill all fields as it should, so form can be submitted
 conForm.submit(function(e){ 

 var isValidForm = true;

 // prevent user from hitting submit button with empty form.

 var tempval = document.getElementById('fullname').value;
 if(tempval.length ==0){
 //jQuery('#p_username').focus();
 jQuery('#fullname').addClass('bordered2'); 
 jQuery('#fullname').removeClass('good_input'); 
 jQuery("#fullname").attr("placeholder", "Εισάγετε το όνομα σας");
 isValidForm = false;
 }
 var sEmail = jQuery('#customeremail').val();
 if (jQuery.trim(sEmail).length == 0) {
 // if user leave the field empty 
 jQuery('#customeremail').removeClass('good_input'); 
 jQuery('#customeremail').addClass('bordered2'); 
 jQuery("#customeremail").attr("placeholder", "Εισάγετε το email σας");
 isValidForm = false;
 }
 if (validateEmail(sEmail)) {
 // if the e-mail is valid
 jQuery('#customeremail').removeClass('bordered2'); 
 jQuery('#customeremail').addClass('good_input'); 
 } else {
 // if the e-mail is NOT valid
 jQuery('#customeremail').removeClass('good_input'); 
 jQuery('#customeremail').addClass('bordered2'); 
 sEmail = "";
 jQuery("#customeremail").val(sEmail);
 jQuery("#customeremail").attr("placeholder", "Εισάγετε υπαρκτό email");
 isValidForm = false;
 }

 var tempval = document.getElementById('phone').value;
 if(tempval.length ==0){
 //jQuery('#p_username').focus();
 jQuery('#phone').addClass('bordered2'); 
 jQuery('#phone').removeClass('good_input'); 
 jQuery("#phone").attr("placeholder", "Εισάγετε το τηλέφωνο σας");
 isValidForm = false;
 }

 return isValidForm; 
 })

**UPDATE:** Removed the `.placeholder()` code that was breaking the logic.

Draft saved

Draft discarded

Edit Summary*

Cancel

removing that line, submit blank form...it display the placeholder in the first field brifly and then submit the form...

user2417624
– user2417624

2014年02月27日 15:17:54 +00:00
Commented Feb 27, 2014 at 15:17
I updated my answer with a full solution . . . use a flag to track the "valid" state and return the flag at the end of the function.

talemyn
– talemyn

2014年02月27日 15:26:52 +00:00
Commented Feb 27, 2014 at 15:26
i just test it...form is not beeing submitted.

user2417624
– user2417624

2014年02月27日 15:30:06 +00:00
Commented Feb 27, 2014 at 15:30
Give me a second to look through the rest of your code . . . the "return true/return false" approach works (I've used it many times), so something else must be stopping the logic.

talemyn
– talemyn

2014年02月27日 15:38:58 +00:00
Commented Feb 27, 2014 at 15:38
i hope that you will manage to find something..i am running out of ideas

user2417624
– user2417624

2014年02月27日 15:58:02 +00:00
Commented Feb 27, 2014 at 15:58

| Show 1 more comment

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

form does nothing on submit

Answer*