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.
LVL 16
CodedKAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.