Solved

jquery helps

Posted on 2014-10-29
31
177 Views
Last Modified: 2014-11-20
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

0
Comment
Question by:ITsolutionWizard
  • 18
  • 12
31 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40413195
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?
0
 

Author Comment

by:ITsolutionWizard
ID: 40413320
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.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40413399
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

0
 

Author Comment

by:ITsolutionWizard
ID: 40413601
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>
0
 

Author Comment

by:ITsolutionWizard
ID: 40413618
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
0
 

Author Comment

by:ITsolutionWizard
ID: 40413680
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>
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40413733
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
0
 

Author Comment

by:ITsolutionWizard
ID: 40413793
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.
0
 

Author Comment

by:ITsolutionWizard
ID: 40413831
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;
}
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40413843
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.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40413855
Seems to work with styling - but remember you have to press the Submit button for the code to work.
0
 

Author Comment

by:ITsolutionWizard
ID: 40413889
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.
0
 

Author Comment

by:ITsolutionWizard
ID: 40413909
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.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40413910
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.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40413961
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/
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:ITsolutionWizard
ID: 40413962
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
0
 

Author Comment

by:ITsolutionWizard
ID: 40413981
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

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40414038
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

0
 

Author Comment

by:ITsolutionWizard
ID: 40414465
I wi'll try later. You are a great in jQuery.

Hope I can hire you ..... Thanks
0
 

Author Comment

by:ITsolutionWizard
ID: 40414513
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

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40415132
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
0
 

Author Comment

by:ITsolutionWizard
ID: 40416406
Thank you. Your sample codes do not include the submit button.
What happen if a submit is clicked, and that is validated as well.
0
 

Author Comment

by:ITsolutionWizard
ID: 40416584
Yes idea?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40416587
Same as the Ok

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

Open in new window

0
 

Author Comment

by:ITsolutionWizard
ID: 40416856
// do validation - if fails return false
   // else return true

I need working codes above .... Thanks
0
 

Author Comment

by:ITsolutionWizard
ID: 40417291
Any updates?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40417963
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

0
 

Author Comment

by:ITsolutionWizard
ID: 40418703
I don't know what you mean. Can you merge My codes?
0
 

Author Comment

by:ITsolutionWizard
ID: 40418769
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

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40419237
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
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now