• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1846
  • Last Modified:

Validate a simple form.

Hi.

I'm trying to use jQuery validate to validate a form but i dont get any error messages back.
Whats wrong ?

This is my code :


<body>
<div>
<form id="registration" action="saveData.php" method="post">
   <p>Username: <input type="text" id="user" name="user" /></p>
   <p>Email   : <input type="text" id="email" name="email" /></p>
   <p><input type="submit" name="submit" value="Add task" /></p>
</form>
</div>
</body>


Inside the js file :
function Check_Email(){
    alert('Just got in the email check');
    $("#registration").validate({
      rules: {
        user: "required",
        email: { required: true, email: true }
      },
      messages: {
        user: "Please specify your username!",
        email: {
          required: "We need your email address to contact you!",
          email: "Your email address must be in the format of name@domain.com"
        }
      }
    });
    alert('Just got out the email check');
    return false;
}

Do i have any typos in there?
If you need to see all the code tell me.

Thanks in advance.
0
CodedK
Asked:
CodedK
  • 6
  • 5
  • 3
1 Solution
 
Mark StegglesWeb DeveloperCommented:
Hi,

I can't see anything wrong with the code :/

Do you get the alert messages? Do you have the page on line?

Have you tried the code not inside the function but like this:

$(function() {
 $("#registration").validate({
      rules: {
        user: "required",
        email: { required: true, email: true }
      },
      messages: {
        user: "Please specify your username!",
        email: {
          required: "We need your email address to contact you!",
          email: "Your email address must be in the format of name@domain.com"
        }
      }
});
0
 
CodedKAuthor Commented:
Hi Steggs,

I've tried everything that you posted before i ask.
The problem is that i'm trying to validate a modal form.
The code i use is from this article :
http://www.experts-exchange.com/articles/Programming/Languages/Scripting/JavaScript/Jquery/jQuery-AJAX-Enabled-Forms-in-Modal-Dialog.html

I thing that you can't get any alerts when you are in modal. Is that true?

I've found some code but its to difficult to implement in my existing code (article).


So the example i found is this :
http://justinribeiro.com/projects/jquery/ui-modal-validation-form-plugin-example.html

I need to do something like this in my existing code.
The think that i dont know is how to draw the alert message inside the modal form.

Can you please help me with that?

Thanks in advance.
0
 
Mark StegglesWeb DeveloperCommented:
Hello,

Please post a link to your page or post all the code here.

Are you loading the form as a standalone page in an iframe inside the modal? I think thats what you need to do
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
CodedKAuthor Commented:
Hi Steggs.

All my code posted below. Its a rar file. Rename from .bmp to .rar.
Modal.bmp
0
 
Mark StegglesWeb DeveloperCommented:
I cant rename it. Email the file to me to mark@futurekode.com
0
 
CodedKAuthor Commented:
You got email.
0
 
Mark StegglesWeb DeveloperCommented:
There is a syntax error which is breaking your script. I'm trying to locate it. I got unexpected token in chrome, see http://www.google.com/support/forum/p/Chrome/thread?tid=7e9f87870a37e401&hl=en
0
 
CodedKAuthor Commented:
Thanks.

I'm using chrome but no errors here :/
0
 
hieloCommented:
On the following page there is a very similar problem to this:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_25452695.html

Save my post as hielo.html and try it. It uses the following validation plugin:
http://validity.thatscaptaintoyou.com/Demos/index.htm

but other than that, the overall functionality of that example seems to be exactly what you are after.
0
 
Mark StegglesWeb DeveloperCommented:
CodedK,

You may want to look at hielo's solution as I couldn't see the problem with this and have to work on other things now
0
 
CodedKAuthor Commented:
Hi Hielo,

I saw the code you posted but i prefer to work with validate plugin unless it's not possible.
I spent hours messing with it and in the meantime i found many alternative solutions with modal forms and validation.

But none of them are so simple and flexible (few lines also) like the modal posted in that article (by anoyes).
The question is i don't know if it can validate modal forms and how should i make the error
procedures work with this specific plug in.

If anyone has any experience on this please help.

Thank you.
0
 
hieloCommented:

$(document).ready(dialogForms);

function dialogForms() {
	$('a.dialog-form').click(function() {
		var a = $(this);
		$.get(a.attr('href'),function(resp){
			var dialog = $('<div></div>').attr('id','formDialog').html( $(resp).find('form:first').parent('div').html() );
			$('body').append(dialog);
			dialog.find(':submit').hide();
			dialog.dialog({
					title: a.attr('title') ? a.attr('title') : '',
					modal: true,
					buttons: {
							'Send email': function() {return (Check_Email(this) && submitFormWithAjax($(this).find('form')));},
							'Cancel': function() {$(this).dialog('close');}
					},
					close: function() {$(this).remove();},
					width: 'auto'
			});
		}, 'html');
	return false;
	});
return false;
}

function Check_Email(context){
    return $('#registration').validate({
		rules:{
				user: "required",
				email: {
						required: true,
						email: true
					}
		},
		messages:{
				user: "Please specify your username!",
				email: {
						required: "We need your email address to contact you!",
						email: "Your email address must be in the format of name@domain.com"
					}
		}
	}).form();
}



function submitFormWithAjax(form) {
  form = $(form);
  $.ajax({
    url: form.attr('action'),
    data: form.serialize(),
    type: (form.attr('method')),
    dataType: 'script'
  });
  return false;
}

Open in new window

0
 
CodedKAuthor Commented:
Thank you very much Hielo.

I've managed to solve the problem by tearing apart some functions from the validate.js.

Your solution seems better. Thank you again :)
0
 
hieloCommented:
>>I've managed to solve the problem by tearing apart some functions from the validate.js.
Ouch! Hope you had fun :)

>>Thank you again
Anytime

Regards,
Hielo
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 6
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now