asked on

Jquery ui validation

Hello experts.
I'm using the jquery ui and the open dialog function to show -submit a form and after the succesfull action return a OK message.
Now i need to validate the form.On the jquery home page (http://jqueryui.com/demos/dialog/#modal-form) is allready a validation example.
Can someone change my code to validate the form?
address required (message:address is required)
name required (message:Name is required)
myemail required,email (message:Name is required,message:please enter valid email)
telefon number (message:Please enter a valid phonen number)
message required (message:Enter your message)

I have in my test page the jquery.validate.js file so that it can work.
If you will use the validation method of the link above that will be not neccesary.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/development-bundle/ui/ui.core.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/development-bundle/ui/ui.dialog.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/development-bundle/ui/effects.core.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/development-bundle/ui/effects.highlight.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.validate.js"></script>  
<link href="js/ui/development-bundle/themes/ui-lightness/ui.all.css" type="text/css"  rel="stylesheet" />
</head>

<body>
<a href="##" class="fg-button ui-state-default fg-button-icon-solo  ui-corner-all"  OnClick="showjQueryDialog(397);return false;" title="Mail"><span class="ui-icon ui-icon-mail-closed"></span>Mail</a>
<div id="dialogMail" title="Email senden">
</div>
<script type="text/javascript">
function showjQueryDialog(id) {
 var $d = $('#dialogMail');
 $d.dialog('option', 'buttons', {
  "Cancel": function() { $(this).dialog("close"); },
  "Send Email" : function() {
   var $form = $("#emailform");
   var isValid = $form.valid(); //validate the form
   if (isValid) {
    var formdata = $form.serialize(); //serialize form data to pass to action page
    // submit form using ajax post
    $.post(
     'Includes/sendemail-action.cfm', // action page url
     formdata, // data to pass to action page
     function(data) { // callback function
      if(data) { // if action page returned true (form processed successfully)
       $("#dialogMail").html("Thank you!<br><br>The email has been sent.<br><br><img src='img/MailOK.gif'"); // replace form with confirmation message
       $('#dialogMail').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } }); // replace dialog buttons with 'OK' button
      }
     }
    )
   }
  }

 }).dialog('open');
 $d.load("Includes/sendemail.cfm?Art_ID="+id); // Add line for load data
 return false; 
}
$(function(){
 // Dialog                       
 $('#dialogMail').dialog({
  autoOpen: false,
  bgiframe:true,
  modal:true,
  width: 400,
  height: 620
 }); 
}); 
</script>      
</body>
</html>


the form:
<p id="validateTips">Fill the form please.</p>
<form id="emailform" name="emailform">
 <fieldset class="fieldclass">
       <label for="address">Address&nbsp;<font style="color:#F00">*</font></label>
<select name="address"  id="address" class="selectcl ui-widget select ui-corner-all">
              <option value="">select</option>
              <option value="1">Male</option>
              <option value="2">Female</option>
              <option value="3">Other</option>
            </select>
       <label for="name">Your name&nbsp;<font style="color:#F00">*</font></label>  
           <input name="name" type="text"  id="name" class="text  ui-corner-all"/>
       <label for="myemail">Your email address&nbsp;<font style="color:#F00">*</font></label> 
 <input name="myemail" id="myemail" type="text" class="text  ui-corner-all"  />
       <label for="telefon">Your telefon-Nr</label> 
<input name="telefon" id="telefon"type="text" class="text ui-corner-all"  />
       <label for="message">Your message&nbsp;<font style="color:#F00">*</font></label>   
<textarea name="message"  id="message" rows="4" wrap="virtual" class="ui-corner-all" ></textarea>
          <input name="art_ID" type="hidden" id="art_ID" value="397" />
       <input name="sendcopy" type="checkbox" value="1" style="display:inline"/> Send a copy of this message to my email account.
</fieldset>
<input type="hidden" name="sendvalue" value="1" />
</form>

Open in new window

ASKER CERTIFIED SOLUTION

azadisaryev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

Nice to see you back azadi!
Code is working perfect

Panos

ASKER

Hi azadi.As i allready said :Nice to see you back.
Thank you

regards
panos