jquery helps

I have below codes using jquery. It is working fine. However got some questions.

1. How to add onfocus inside of event ($("#btnPrincipal").click(function ())
2. How to add jquery validation. For example, just want to add if principalName is null or something close.
3. I want to add close button so I can close this pop up.
4. I want to use resource file as well inside of html codes like <label></label>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication11.Default" %>
<!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 runat="server"><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>  
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
             function codeBinsAddEvent(obj, type, fn) {
                 if (obj.attachEvent) {
                     if (type == "load") {
                         obj.attachEvent('on' + type, fn);
                     }
                     else {
                         obj.attachEvent('onreadystatechange', fn);
                     }
                     /*
                     obj['e'+type+fn]=fn;
                     obj[type+fn]=function(){
                     obj['e'+type+fn](window.event)}
                     ;obj.attachEvent('on'+type,obj[type+fn])*/
                 }
                 else obj.addEventListener(type, fn, false)
             };
             function codeBinsAddLoadEvent(fn) {
                 codeBinsAddEvent(document.addEventListener && !window.addEventListener ? document : window, 'load', fn)
             };
             function codeBinsAddReadyEvent(fn) {
                 codeBinsAddEvent(document, 'DOMContentLoaded', fn)
             };            
         </script>   
</head>
<body>
   <form id="form1" runat="server">
   <div id="panelPrincipal">
   <input type="button" class="button" value="Principal Information " id="btnPrincipal" />
   <input type="text" id="valueFromPrincipal" name="valueFromPrincipal" />
   <!-- Begin Dialog Box-->
   <div class="dialog" id="divPrincipal"><label id="valueFromPrincipalButton"></label>
   <table cellpadding="2" cellspacing="2"> 
   <tr><td>Principal Name:</td><td><input type="text" id="principalName" /></td></tr>
   <tr><td>DBA:</td><td><input type="text" id="principalDba" /></td></tr>
   <tr><td>License No.:</td><td><input type="text" id="principalLicenseNo" /></td></tr>
   <tr><td>Address:</td><td><input type="text" id="principalAddress" /></td></tr>
   <tr><td>City:</td><td><input type="text" id="principalCity" /></td></tr>
   <tr>
   <td>State/Zip:</td><td><input type="text" id="principalState" />&nbsp;
   <input type="text" id="principalZip" maxlength="5" size="5" />   
   </td>
   </tr>
   <tr><td>Phone No.</td><td><input type="text" id="principalPhoneNo" /></td></tr>
   <tr><td>Fax No.</td><td><input type="text" id="principalFaxNo" /></td></tr>
   <tr><td>Email:</td><td><input type="text" id="principalEmail" /></td></tr>   
   <tr><td><br /></td><td><input type="button" value="Ok" id="principalBtn" /></td></tr>
   </table>  
   </div>
   <!-- End Dialog Box-->   
   <script type="text/javascript">
       $(function () {
           $("#btnPrincipal").click(function () {
               $("#valueFromPrincipalButton").text($(this).val().trim());
               $("#input[type=text]").val('');
               //$("#valueFromPrincipal").val('');
               $("#divPrincipal").show(500);
           });
           $("#principalBtn").click(function () 
           {
               $("#valueFromPrincipal").val($("#principalName").val().trim() + " " + $("#principalAddress").val().trim());
               $("#divPrincipal").hide(400);
           });
       });
</script>
   </div>

   <asp:Button runat="server" ID="cmdFinalSubmit" Text="Submit Now" onclick="cmdFinalSubmit_Click" />
   <br />
   <asp:Label runat="server" ID="lbl"></asp:Label>
   </form>
</body>

</html>

Open in new window

LVL 1
ITsolutionWizardAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Julian HansenCommented:
1. How to add onfocus inside of event ($("#btnPrincipal").click(function ())
To which element?
Here is the general way of doing it - repelace #elementid with your element ID
$('#elementid').focus();

Open in new window


2. How to add jquery validation. For example, just want to add if principalName is null or something close.
... 
if ($('#principalName').val() == '') alert('Please enter a Principal Name');
...

Open in new window


3. I want to add close button so I can close this pop up.
<button id="closepopup">Close</button>
...
$('#closepopup').click(function(e) {
  e.preventDefault();
  $("#divPrincipal").hide(400);
});

Open in new window


4.  I want to use resource file as well inside of html codes like <label></label>

Please explain?

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
ITsolutionWizardAuthor Commented:
About the validation, I prefer just show like required field next the textbox instead of alert.

Item 4 i found work around solution please ignore it.
Julian HansenCommented:
There are many ways to skin the validation cat.

One way is to have an empty <div> after the field that is hidden - you add the error to it as needed so.
The HTML
<tr><td>Principal Name:</td><td><input type="text" id="principalName" /><div class="error"></div></td></tr>

Open in new window

The Javascript
if ($('#principalName').val() == '') $('#principalName').next().html('Please enter a Principal Name');

Open in new window

Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

ITsolutionWizardAuthor Commented:
about the focus I tried below and it is not working.

 <script type="text/javascript">
       $(function () {
           $("#btnPrincipal").click(function () {
               $("#valueFromPrincipalButton").text($(this).val().trim());
               $("#input[type=text]").val('');
               //$("#valueFromPrincipal").val('');
               $('#principalName').focus();
               $("#divPrincipal").show(500);
           });
           $("#principalBtn").click(function () {
               $("#valueFromPrincipal").val($("#principalName").val() + " " + $("#principalAddress").val());
               $("#divPrincipal").hide(400);
           });
           $("#principalCloseThisPopUp").click(function () {
               $("#divPrincipal").hide(400);
           });

       });
</script>
ITsolutionWizardAuthor Commented:
About the validation, it works, but after I put some thing in the textbox and tab next text box, the error message should be invisible. But it is not working. It is still shown error message even I have value inside of the text box.

In addition, it may be better if you can implement your example merge into my jquery codes. It is easier for me to read.

I appreciate your helps
ITsolutionWizardAuthor Commented:
and the validation message shown next the company name <error message> instead of after the text box by using the following codes:

<tr><td>Principal Name:</td><td><input type="text" id="principalName" /><div class="error"></div></td></tr>

And the result after validation is

<tr><td>Principal Name:<shown error message here></td><td><input type="text" id="principalName" /><div class="error"></div></td></tr>
Julian HansenCommented:
The focus does work - to validate on blur then bind to the .blur() event on principalName like so
<script type="text/javascript">
$(function () {
	$("#btnPrincipal").click(function () {
		$("#valueFromPrincipalButton").text($(this).val().trim());
		$("#input[type=text]").val('');
		//$("#valueFromPrincipal").val('');
		$('#principalName').focus();
		$("#divPrincipal").show(500);
	});
	$('#principalName').blur(function() {
		var error = '';
		if ($(this).val() == '') {
			error = 'Principal name must have a value';
		}
		$('#principalNameError').html(error);
	});
	$("#principalBtn").click(function () {
		$("#valueFromPrincipal").val($("#principalName").val() + " " + $("#principalAddress").val());
		$("#divPrincipal").hide(400);
	});
	$("#principalCloseThisPopUp").click(function () {
		$("#divPrincipal").hide(400);
	});
});
</script> 

Open in new window

Working sample here http://www.marcorpsa.com/ee/e055.html
ITsolutionWizardAuthor Commented:
that seems a lot of works for validation. Based on my first post code. Is it possible to merge with below?

http://www.magicedit.com/EasyFormValidationwi.cl

If yes, can you show me how? I can get rid of html table and using their codes as replacement.
ITsolutionWizardAuthor Commented:
for your codes, add below style and you will see why i said it is not working

.button
{
    border: 1px solid #333;
    background: #CCCCCC;
    width: 200px;
}
.button:hover{
  background:#a4a9fd;
}
.dialog
{
    border: 5px solid #0099FF;
    padding: 10px;
    background: #CCCCCC;
    position: absolute;
    display: none;
    width: 730px;
    z-index:1000;
}
.dialog label
{
    display: inline-block;
    color: #666666;
}
input[type=text]{
  border:1px solid #333;
  display:inline-block;
  margin:5px;
}
#btnOK{
  border:1px solid #000;
  background:#ff9999;
  margin:5px;
}

#btnOK:hover{
  border:1px solid #000;
  background:#ffacac;
}

body
{
    font-family: Calibri;
}
.error
{
    color: #FF0066;
    float:left;
}
tr
{
    vertical-align:top;
}
Julian HansenCommented:
All you need to do is give your required elements a class of required

<input type="text" id="principalName" class="required"/>

Add the library to your <head> section and then add the following to your JQUery

$(function() {
   $('#form1').validate();
});

Open in new window

Full listing
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>  
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	function codeBinsAddEvent(obj, type, fn) {
		if (obj.attachEvent) {
			if (type == "load") {
				obj.attachEvent('on' + type, fn);
			}
			else {
				obj.attachEvent('onreadystatechange', fn);
			}
			/*
				obj['e'+type+fn]=fn;
				obj[type+fn]=function(){
				obj['e'+type+fn](window.event)}
				;obj.attachEvent('on'+type,obj[type+fn])
			*/
		}
		else 
			obj.addEventListener(type, fn, false)
	}
	function codeBinsAddLoadEvent(fn) {
		codeBinsAddEvent(document.addEventListener && !window.addEventListener ? document : window, 'load', fn)
	}
	function codeBinsAddReadyEvent(fn) {
		codeBinsAddEvent(document, 'DOMContentLoaded', fn)
	}          
</script>   
</head>
<body>
<form id="form1" runat="server">
	<div id="panelPrincipal">
		<input type="button" class="button" value="Principal Information " id="btnPrincipal" />
		<input type="text" id="valueFromPrincipal" name="valueFromPrincipal" />
		<!-- Begin Dialog Box-->
		<div class="dialog" id="divPrincipal"><label id="valueFromPrincipalButton"></label>
			<table cellpadding="2" cellspacing="2"> 
				<tr>
					<td>Principal Name:</div></td>
					<td><input type="text" id="principalName" class="required"/></td>
				</tr>
				<tr>
					<td>DBA:</td><td><input type="text" id="principalDba" /></td>
				</tr>
				<tr>
					<td>License No.:</td><td><input type="text" id="principalLicenseNo" /></td>
				</tr>
				<tr>
					<td>Address:</td><td><input type="text" id="principalAddress" /></td>
				</tr>
				<tr>
					<td>City:</td><td><input type="text" id="principalCity" /></td>
				</tr>
				<tr>
					<td>State/Zip:</td><td><input type="text" id="principalState" />&nbsp;
						<input type="text" id="principalZip" maxlength="5" size="5" />   
					</td>
				</tr>
				<tr>	
					<td>Phone No.</td><td><input type="text" id="principalPhoneNo" /></td>
				</tr>
				<tr>
					<td>Fax No.</td><td><input type="text" id="principalFaxNo" /></td>
				</tr>
				<tr>
					<td>Email:</td><td><input type="text" id="principalEmail" /></td>
				</tr>   
				<tr>
					<td><br /></td>
					<td><input type="button" value="Ok" id="principalBtn" /></td>
				</tr>
			</table>  
		</div>
		<!-- End Dialog Box-->   
	</div>
	<input type="submit" value="Submit Now" />
</form>
<script type="text/javascript">
$(function () {
	$('#form1').validate();
	$("#btnPrincipal").click(function () {
		$("#valueFromPrincipalButton").text($(this).val().trim());
		$("#input[type=text]").val('');
		//$("#valueFromPrincipal").val('');
		$('#principalName').focus();
		$("#divPrincipal").show(500);
	});
	$('#xprincipalName').blur(function() {
		var error = '';
		if ($(this).val() == '') {
			error = 'Principal name must have a value';
		}
		$('#principalNameError').html(error);
	});
	$("#principalBtn").click(function () {
		$("#valueFromPrincipal").val($("#principalName").val() + " " + $("#principalAddress").val());
		$("#divPrincipal").hide(400);
	});
	$("#principalCloseThisPopUp").click(function () {
		$("#divPrincipal").hide(400);
	});
});
</script> 
</body>
</html>

Open in new window

Remember validation with this library will happen on submit - not when you click the Ok Button.
Julian HansenCommented:
Seems to work with styling - but remember you have to press the Submit button for the code to work.
ITsolutionWizardAuthor Commented:
About your code, when the ok button is clicked, no matter what, the div is hidden. so the validation part does not shown visible. that is the problem.  Your validation works but it is not visible.

And I want to validate with ok button. not submit button. I don't really care about the submit button because it is just a way pointing to the server IP. I need the validation check complete on ok button.
ITsolutionWizardAuthor Commented:
about the submit button I can do something like below and I can still add class="required" into all the principal popup

$(function() {
   $('#form1').validate();
});

if validate = false
globalTextArea.innerhtml = show me the summary of all validation result.

But I don't know how to get validation summary in jquery ... :-( need help.
Julian HansenCommented:
The validation library you are using works on the .submit event so it will only fire if you click the submit button.

So you need to choose - either use submit to validate or use another form of validation.

Most validation libraries work on submit.

My earlier post worked on the .blur event - as you leave the control it validates.
Julian HansenCommented:
But I don't know how to get validation summary in jquery
The only way you can do this is manually validating using techniques discussed already or if the validation library you are using supports this functionality.

Can you elaborate on what you are wanting here?

JQuery does not have inherent validation - you would need to build a validation solution using JQuery or import another one like JQuery Validate http://jqueryvalidation.org/
ITsolutionWizardAuthor Commented:
I will use both.

When the popup is on and click on ok button it need to be validated.
When submit button is clicked, it will validate as well.

I already told you the onblur does not work because the div will be hidden regardless of the validation is true or false in the codes
ITsolutionWizardAuthor Commented:
Below code in jquery is working.

However, since there is too many textbox and etc. Can you help me to put like global function so I can call from
like mainValidation('textboxname') onclick or onblur?

I am not expert about jquery. :-D sorry, and need help ....


<script type="text/javascript">
       $(function () {


           $("#btnPrincipal").click(function () {
               $("#valueFromPrincipalButton").text($(this).val().trim());
               $("#input[type=text]").val('');
               //$("#valueFromPrincipal").val('');
               $('#principalName').focus();
               $("#divPrincipal").show(500);
           });

           $('#principalName').blur(function () {
               var error = '';
               if ($(this).val() == '') {
                   error = '*';
               }
               else {
                   error = '';
               }
               $('#principalNameError').html(error);
           });

           $("#principalBtn").click(function () {
               $("#valueFromPrincipal").val($("#principalName").val() + " " + $("#principalAddress").val());
               if ($('#principalName').val() == '')
                   $('#principalNameError').html('*');
               else
                   $("#divPrincipal").hide(400);
           });


           $("#principalCloseThisPopUp").click(function () {
               $("#divPrincipal").hide(400);
           });

       });
   </script>

Open in new window

Julian HansenCommented:
You can do something like this. The following code binds the blur event handler to all elements with a class="required"


$('.required').blur(function () {
  var errorMsg = ''; // THIS WILL CLEAR THE ERROR
  if ($(this).val() == '') {
    errorMsg = '*';
  }

  // FIND THE CLOSEST <tr> PARENT
  // FROM THERE FIND THE FIRST ELEMENT 
  // WITH A CLASS OF error
  
  $(this).closest('tr').find('.error').html(errorMsg);
});

Open in new window

Now all you need to do is this - add the required class to your input and a <div class="error"></div> after the Text for the input.
<tr>
   <td>Principal Name <div class="error"></div></td>
   <td><input type="text" class="required" /></td>
</tr>

Open in new window

ITsolutionWizardAuthor Commented:
I wi'll try later. You are a great in jQuery.

Hope I can hire you ..... Thanks
ITsolutionWizardAuthor Commented:
try below and still not working

<div id="panelPrincipal">
   <input type="button" class="button" value="Principal Information " id="btnPrincipal" />
   <input type="text" id="valueFromPrincipal" name="valueFromPrincipal" class="required" />
   <!-- Begin Dialog Box-->
   <div class="dialog" id="divPrincipal"><label id="valueFromPrincipalButton"></label><br /><br />
   <div style="float:left;width:350px">
   <table cellpadding="2" cellspacing="2"> 
   <tr><td>Business Type:</td><td><select name="principalBusinessType">
    <option value="Company - LLC">LLC</option>
    <option value="Individual">Individual</option>
   </select></td></tr>
   </table>
   <table cellpadding="2" cellspacing="2"> 
   <tr><td>Company Name:<div id="error" class="error"></div></td>
   <td><input type="text" id="principalName" class="required" /></td></tr>
   <tr><td>DBA:</td><td><input type="text" id="principalDba" /></td></tr>
   <tr><td colspan="2">Or</td></tr>
   <tr><td>First Name:</td><td><input type="text" id="principalFirstName" /></td></tr>
   <tr><td>Last Name:</td><td><input type="text" id="principalLastName" /></td></tr>
   <tr><td>Middle Name:</td><td><input type="text" id="principalMiddle" /></td></tr>
   </table>  
   </div>
   <div style="float:left;width:370px">
         <table cellpadding="2" cellspacing="2"> 
   <tr><td>License No.:</td><td><input type="text" id="principalLicenseNo" /></td></tr>
   <tr><td>Address:</td><td><input type="text" id="principalAddress" /></td></tr>
   <tr><td>City:</td><td><input type="text" id="principalCity" /></td></tr>
   <tr>
   <td>State/Zip:</td><td><input type="text" id="principalState" />&nbsp;
   <input type="text" id="principalZip" maxlength="5" size="5" />   
   </td>
   </tr>
   <tr><td>Phone No.</td><td><input type="text" id="principalPhoneNo" /></td></tr>
   <tr><td>Fax No.</td><td><input type="text" id="principalFaxNo" /></td></tr>
   <tr><td>Email:</td><td><input type="text" id="principalEmail" /></td></tr>   
   <tr><td><br /></td><td>
   <input type="button" value="Ok" id="principalBtn" />
   <input type="button" value="Close" id="principalCloseThisPopUp" />
   </td></tr>
   </table>  
   </div>
   </div>
   <!-- End Dialog Box-->   
   <script type="text/javascript">
       $(function () {
           $("#btnPrincipal").click(function () {
               $("#valueFromPrincipalButton").text($(this).val().trim());
               $("#input[type=text]").val('');
               //$("#valueFromPrincipal").val('');
               $('#principalName').focus();
               $("#divPrincipal").show(500);
           });

           $('.required').blur(function () {
               var errorMsg = ''; // THIS WILL CLEAR THE ERROR
               if ($(this).val() == '') {
                   errorMsg = '*';
               }

               // FIND THE CLOSEST <tr> PARENT
               // FROM THERE FIND THE FIRST ELEMENT 
               // WITH A CLASS OF error

               $(this).closest('tr').find('.error').html(errorMsg);
           });

           $("#principalBtn").click(function () {
               $("#valueFromPrincipal").val($("#principalName").val() + " " + $("#principalAddress").val());

                    $("#divPrincipal").hide(400);
           });
           $("#principalCloseThisPopUp").click(function () {
               $("#divPrincipal").hide(400);
           });
       });
   </script>
</div>

Open in new window

Julian HansenCommented:
If you need to contact me my details are in my profile.
Here is some code that should do what you want
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>  
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
  function codeBinsAddEvent(obj, type, fn) {
    if (obj.attachEvent) {
      if (type == "load") {
        obj.attachEvent('on' + type, fn);
      }
      else {
        obj.attachEvent('onreadystatechange', fn);
      }
      /*
        obj['e'+type+fn]=fn;
        obj[type+fn]=function(){
        obj['e'+type+fn](window.event)}
        ;obj.attachEvent('on'+type,obj[type+fn])
      */
    }
    else 
      obj.addEventListener(type, fn, false)
  }
  function codeBinsAddLoadEvent(fn) {
    codeBinsAddEvent(document.addEventListener && !window.addEventListener ? document : window, 'load', fn)
  }
  function codeBinsAddReadyEvent(fn) {
    codeBinsAddEvent(document, 'DOMContentLoaded', fn)
  }          
</script>   
<style type="text/css">
.button
{
    border: 1px solid #333;
    background: #CCCCCC;
    width: 200px;
}
.button:hover{
  background:#a4a9fd;
}
.dialog
{
    border: 5px solid #0099FF;
    padding: 10px;
    background: #CCCCCC;
    position: absolute;
    display: none;
    width: 730px;
    z-index:1000;
}
.dialog label
{
    display: inline-block;
    color: #666666;
}
input[type=text]{
  border:1px solid #333;
  display:inline-block;
  margin:5px;
}
#btnOK{
  border:1px solid #000;
  background:#ff9999;
  margin:5px;
}

#btnOK:hover{
  border:1px solid #000;
  background:#ffacac;
}

body
{
    font-family: Calibri;
}
.error
{
    color: #FF0066;
    float:left;
}
tr
{
    vertical-align:top;
} 
</style>
</head>
<body>
<form id="form1" runat="server">
  <div id="panelPrincipal">
    <input type="button" class="button" value="Principal Information " id="btnPrincipal" />
    <input type="text" id="valueFromPrincipal" name="valueFromPrincipal" class="required" />
    
    <!-- Begin Dialog Box-->
    <div class="dialog" id="divPrincipal">
      <label id="valueFromPrincipalButton"></label><br /><br />
      <div style="float:left;width:350px">
        <table cellpadding="2" cellspacing="2"> 
          <tr>
            <td>Business Type:</td>
            <td>
              <select name="principalBusinessType">
                <option value="Company - LLC">LLC</option>
                <option value="Individual">Individual</option>
              </select>
            </td>
          </tr>
        </table>
        <table cellpadding="2" cellspacing="2"> 
          <tr>
            <td>Company Name:<div id="error" class="error"></div></td>
            <td><input type="text" id="principalName" class="required" /></td>
          </tr>
          <tr>
            <td>DBA:</td><td><input type="text" id="principalDba" /></td>
          </tr>
          <tr>
            <td colspan="2">Or</td>
          </tr>
          <tr>
            <td>First Name:</td><td><input type="text" id="principalFirstName" /></td>
          </tr>
          <tr>
            <td>Last Name:</td><td><input type="text" id="principalLastName" /></td>
          </tr>
          <tr>
            <td>Middle Name:</td><td><input type="text" id="principalMiddle" /></td>
          </tr>
        </table>  
      </div>
      <div style="float:left;width:370px">
         <table cellpadding="2" cellspacing="2"> 
          <tr>
            <td>License No.:</td><td><input type="text" id="principalLicenseNo" /></td></tr>
          <tr>
            <td>Address:</td><td><input type="text" id="principalAddress" /></td></tr>
          <tr>
            <td>City:</td><td><input type="text" id="principalCity" /></td></tr>
          <tr>
            <td>State/Zip:</td><td><input type="text" id="principalState" />&nbsp;
              <input type="text" id="principalZip" maxlength="5" size="5" />   
            </td>
          </tr>
          <tr>
            <td>Phone No.</td>
            <td><input type="text" id="principalPhoneNo" /></td>
          </tr>
          <tr>
            <td>Fax No.</td>
            <td><input type="text" id="principalFaxNo" /></td>
          </tr>
          <tr>
            <td>Email:</td>
            <td><input type="text" id="principalEmail" /></td>
          </tr>   
          <tr>
            <td><br /></td>
            <td>
              <input type="button" value="Ok" id="principalBtn" />
              <input type="button" value="Close" id="principalCloseThisPopUp" />
            </td>
          </tr>
        </table>  
      </div>
    </div>
  </div>
</form>
   <!-- End Dialog Box-->   
<script type="text/javascript">
$(function () {
  $("#btnPrincipal").click(function () {
    $("#valueFromPrincipalButton").text($(this).val().trim());
    $("#input[type=text]").val('');
    //$("#valueFromPrincipal").val('');
    $('#principalName').focus();
    $("#divPrincipal").show(500);
   });

  $('.required').blur(function () {
    var errorMsg = ''; // THIS WILL CLEAR THE ERROR
    if ($(this).val() == '') {
      errorMsg = '*';
    }

    // FIND THE CLOSEST <tr> PARENT
    // FROM THERE FIND THE FIRST ELEMENT 
    // WITH A CLASS OF error

    $(this).closest('tr').find('.error').html(errorMsg);
  });

  $("#principalBtn").click(function () {
    // First validate our required fields
    var valid = true;
    $('#divPrincipal .required').each(function(index, element) {
      var errorMsg = '';
      if ($(element).val() == '') {
        errorMsg = '*';
        valid = false;
      }
      $(element).closest('tr').find('.error').html(errorMsg);
    });

    // ERRORS WERE ENCOUNTERED SO BUG OUT
    if (!valid) return;

    $("#valueFromPrincipal").val($("#principalName").val() + " " + $("#principalAddress").val());
    $("#divPrincipal").hide(400);
  });
  
  $("#principalCloseThisPopUp").click(function () {
    $("#divPrincipal").hide(400);
  });
});
</script>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/e056.html
ITsolutionWizardAuthor Commented:
Thank you. Your sample codes do not include the submit button.
What happen if a submit is clicked, and that is validated as well.
ITsolutionWizardAuthor Commented:
Yes idea?
Julian HansenCommented:
Same as the Ok

$('#form1').submit(function() {
   // do validation - if fails return false
   // else return true
});

Open in new window

ITsolutionWizardAuthor Commented:
// do validation - if fails return false
   // else return true

I need working codes above .... Thanks
ITsolutionWizardAuthor Commented:
Any updates?
Julian HansenCommented:
This would work in an identical way to the Ok button except you bind to the form .submit event and return false to prevent the default form action
$(function() {
   $('#form1').submit(function(e) {
     var valid = true;
     $('#divPrincipal .required').each(function(index, element) {
       var errorMsg = '';
       if ($(element).val() == '') {
         errorMsg = '*';
         valid = false;
		 e.preventDefault();
         $(element).closest('tr').find('.error').html(errorMsg);      
       }
     });

	 return valid;
  });
});

Open in new window

ITsolutionWizardAuthor Commented:
I don't know what you mean. Can you merge My codes?
ITsolutionWizardAuthor Commented:
Thanks, I think yours works but I don't think it is ideal to me because If i don't use html table, it does not work.
As a result, I done on my own using some of your codes. The only issue is when it is tab, the error message does not go away. May be you can help me...:-). Thanks,
<div id="panelPrincipal">
   <table>
   <tr><td><input type="button" class="button" value="Principal Information " id="btnPrincipal" /></td>
   <td><input type="text" id="valueFromPrincipal" name="valueFromPrincipal" /></td>
   </tr>
   </table>
   <!-- Begin Dialog Box-->
   <div class="dialog" id="divPrincipal"><label id="valueFromPrincipalButton"></label><br /><br />
   <div style="float:left;width:350px">
   <table cellpadding="2" cellspacing="2"> 
   <tr><td>Business Type:</td>
       <td>
    <select name="principalBusinessType">
    <option value="Company - LLC">LLC</option>
    <option value="Individual">Individual</option>
    </select>
   </td></tr>
   </table>
   <table cellpadding="2" cellspacing="2"> 
   <tr><td>Company Name:</td><td><input type="text" id="principalName"  /><span class="error" id="errorPrincipalName"></span></td></tr>
   <tr><td>DBA:</td><td><input type="text" id="principalDba" /></td></tr>
   <tr><td colspan="2">Or</td></tr>
   <tr><td>First Name:</td><td><input type="text" id="principalFirstName" /></td></tr>
   <tr><td>Last Name:</td><td><input type="text" id="principalLastName" /></td></tr>
   <tr><td>Middle Name:</td><td><input type="text" id="principalMiddle" /></td></tr>
   </table>  
   </div>
   <div style="float:left;width:370px">
   <table cellpadding="2" cellspacing="2"> 
   <tr><td>License No.:</td><td><input type="text" id="principalLicenseNo" /></td></tr>
   <tr><td>Address:</td><td><input type="text" id="principalAddress" /><span class="error" id="errorPrincipalAddress"></span></td></tr>
   <tr><td>City:</td><td><input type="text" id="principalCity" /><span class="error" id="errorPrincipalCity"></span></td></tr>
   <tr>
   <td>State/Zip:</td><td><input type="text" id="principalState" />
   <input type="text" id="principalZip" maxlength="5" size="5" />   
   <span class="error" id="errorPrincipalState"></span>&nbsp;<span class="error" id="errorPrincipalZip"></span>
   </td>
   </tr>
   <tr><td>Phone No.:</td><td><input type="text" id="principalPhoneNo" /><span class="error" id="errorPrincipalPhoneNo"></span></td></tr>
   <tr><td>Fax No.:</td><td><input type="text" id="principalFaxNo" /></td></tr>
   <tr><td>Email:</td><td><input type="text" id="principalEmail" /><span class="error" id="errorPrincipalEmail"></span></td></tr>   
   <tr><td><br /></td><td>
   <input type="button" value="Done" id="principalBtn" />
   <input type="button" value="Close" id="principalCloseThisPopUp" />
   </td></tr>
   </table>  
   </div>
   </div>
   <!-- End Dialog Box-->   
   <script type="text/javascript">
       function DefaultToNull()
       {
           errorPrincipalName.innerHTML = '';
           errorPrincipalAddress.innerHTML = '';
           errorPrincipalCity.innerHTML = '';
           errorPrincipalState.innerHTML = '';
           errorPrincipalZip.innerHTML = '';
           errorPrincipalPhoneNo.innerHTML = '';
           errorPrincipalEmail.innerHTML = '';
       }
       $(function () {
           $("#btnPrincipal").click(function () {
               $("#valueFromPrincipalButton").text($(this).val().trim());
               $("#input[type=text]").val('');
               //$("#valueFromPrincipal").val('');
               $('#principalName').focus();
               $("#divPrincipal").show(500);
           });
           var passYn = 'Pass';
           var notPass = 'Not Pass';
           var pass = 'Pass';
           var requiredFieldMsg = '*';
           $("#principalBtn").click(function () {
               if ($("#principalName").val() == '') {
                   passYn = notPass;
                   errorPrincipalName.innerHTML = requiredFieldMsg;
                   $("#principalName").focus();
               }
               else if ($("#principalAddress").val() == '') {
                   passYn = notPass;
                   errorPrincipalAddress.innerHTML = requiredFieldMsg;
                   $("#principalAddress").focus();
               }
               else if ($("#principalCity").val() == '') {
                   passYn = notPass;
                   errorPrincipalCity.innerHTML = requiredFieldMsg;
                   $("#principalCity").focus();
               }
               else if ($("#principalState").val() == '') {
                   passYn = notPass;
                   errorPrincipalState.innerHTML = requiredFieldMsg;
                   $("#principalState").focus();
               }
               else if ($("#principalZip").val() == '') {
                   passYn = notPass;
                   errorPrincipalZip.innerHTML = requiredFieldMsg;
                   $("#principalZip").focus();
               }
               else if ($("#principalPhoneNo").val() == '') {
                   passYn = notPass;
                   errorPrincipalPhoneNo.innerHTML = requiredFieldMsg;
                   $("#principalPhoneNo").focus();
               }
               else if ($("#principalEmail").val() == '') {
                   passYn = notPass;
                   errorPrincipalEmail.innerHTML = requiredFieldMsg;
                   $("#principalEmail").focus();
               }
               else {
                   passYn = pass;
                   DefaultToNull();
               }

               if (passYn == notPass) {
                   $("#divPrincipal").show(500);
               }
               else {
                   $("#divPrincipal").hide(400);
                   
               }
               $("#valueFromPrincipal").val(passYn);
           }
           );
           $("#principalCloseThisPopUp").click(function () {
               $("#divPrincipal").hide(400);
           });
       });
   </script>
</div>

Open in new window

Julian HansenCommented:
The repeated code you have is unnecessary. The dependence on the table was based on your markup. Here is code that does the same thing - on lost focus and Done button - without having to add the <span class="error"> elements to the markup and that is not dependent on tables
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>  
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.button
{
    border: 1px solid #333;
    background: #CCCCCC;
    width: 200px;
}
.button:hover{
  background:#a4a9fd;
}
.dialog
{
    border: 5px solid #0099FF;
    padding: 10px;
    background: #CCCCCC;
    position: absolute;
    display: none;
    width: 730px;
    z-index:1000;
}
.dialog label
{
    display: inline-block;
    color: #666666;
}
input[type=text]{
  border:1px solid #333;
  display:inline-block;
  margin:5px;
}
#btnOK{
  border:1px solid #000;
  background:#ff9999;
  margin:5px;
}

#btnOK:hover{
  border:1px solid #000;
  background:#ffacac;
}

body
{
    font-family: Calibri;
}
.error
{
    color: #FF0066;
}
tr
{
    vertical-align:top;
} 
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="panelPrincipal">
   <table>
    <tr>
      <td><input type="button" class="button" value="Principal Information " id="btnPrincipal" /></td>
      <td><input type="text" id="valueFromPrincipal" name="valueFromPrincipal" /></td>
    </tr>
   </table>
   <!-- Begin Dialog Box-->
  <div class="dialog" id="divPrincipal"><label id="valueFromPrincipalButton"></label><br /><br />
    <div style="float:left;width:350px">
      <table cellpadding="2" cellspacing="2"> 
        <tr>
          <td>Business Type:</td>
          <td>
            <select name="principalBusinessType">
              <option value="Company - LLC">LLC</option>
              <option value="Individual">Individual</option>
            </select>
          </td>
        </tr>
      </table>
      <table cellpadding="2" cellspacing="2"> 
        <tr>
          <td><label for="principalName">Company Name:</label></td>
          <td><input type="text" id="principalName" class="required" /></td>
        </tr>
        <tr>
          <td>DBA:</td>
          <td><input type="text" id="principalDba" /></td>
        </tr>
        <tr>
          <td colspan="2">Or</td>
        </tr>
        <tr>
          <td>First Name:</td><td><input type="text" id="principalFirstName" /></td>
        </tr>
        <tr>
          <td>Last Name:</td><td><input type="text" id="principalLastName" /></td>
        </tr>
        <tr>
          <td>Middle Name:</td><td><input type="text" id="principalMiddle" /></td>
        </tr>
      </table>  
    </div>
    <div style="float:left;width:370px">
      <table cellpadding="2" cellspacing="2"> 
        <tr>
          <td>License No.:</td><td><input type="text" id="principalLicenseNo" /></td></tr>
        <tr>
          <td>Address:</td><td><input type="text" id="principalAddress" /><span class="error" id="errorPrincipalAddress"></span></td></tr>
        <tr>
          <td>City:</td><td><input type="text" id="principalCity" /><span class="error" id="errorPrincipalCity"></span></td></tr>
        <tr>
          <td><label for="principalState">State/Zip:</label></td>
          <td>
            <input type="text" id="principalState" class="required"/>
            <input type="text" id="principalZip" maxlength="5" size="5" class="required" data-label="principalState"/>   
          </td>
        </tr>
        <tr>
          <td><label for="principalPhoneNo">Phone No.:</label></td>
          <td><input type="text" id="principalPhoneNo" class="required"/></td>
        </tr>
        <tr>
          <td>Fax No.:</td><td><input type="text" id="principalFaxNo" /></td></tr>
        <tr>
          <td><label for="principalEmail">Email:</label></td>
          <td><input type="text" id="principalEmail" /></td>
        </tr>   
        <tr>
          <td><br /></td><td>
            <input type="button" value="Done" id="principalBtn" />
            <input type="button" value="Close" id="principalCloseThisPopUp" />
          </td>
        </tr>
      </table>  
     </div>
   </div>
   <!-- End Dialog Box-->   
</form>
<script type="text/javascript">
function DefaultToNull()
{
   errorPrincipalName.innerHTML = '';
   errorPrincipalAddress.innerHTML = '';
   errorPrincipalCity.innerHTML = '';
   errorPrincipalState.innerHTML = '';
   errorPrincipalZip.innerHTML = '';
   errorPrincipalPhoneNo.innerHTML = '';
   errorPrincipalEmail.innerHTML = '';
}
$(function () {
  $("#btnPrincipal").click(function () {
    $("#valueFromPrincipalButton").text($(this).val().trim());
    $("#input[type=text]").val('');
    //$("#valueFromPrincipal").val('');
    $('#principalName').focus();
    $("#divPrincipal").show(500);
  });
  
  // BIND TO BLUR EVENT ON REQUIRED FIELDS
  $('.required').blur(function() {
    // GET ID BASED ON INPUT ID OR DATA-LABEL VALUE
    var id = $(this).data('label') || $(this).attr('id');
    // REMOVE ERROR MARK
    $('#' + id + '_error').remove();
    
    // CHECK FOR BLANK
    if ($(this).val() == '') {
      // DYNAMICALLY ADD ERROR ELEMENT WITH ID MADE UP OF INPUT ID AND '_error'
      $("label[for='"+id+"']").after($('<span/>').addClass('error').html('*').attr('id', id + '_error'));
    }
  });
   
   $("#principalBtn").click(function () {
    var valid = true;        
    $('.required').each(function(item, indx) {
      var id = $(this).data('label') || $(this).attr('id');
      $('#' + id + '_error').remove();
      if ($(this).val() == '') {
        $("label[for='"+id+"']").after($('<span/>').addClass('error').html('*').attr('id', id + '_error'));
        valid = false;
      }
    });

     if (!valid) {
       $("#divPrincipal").show(500);
     }
     else {
       $("#divPrincipal").hide(400);
     }
   });
   $("#principalCloseThisPopUp").click(function () {
     $("#divPrincipal").hide(400);
   });
});
</script>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/e056.1.html
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.