[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

javascript validation form message into dialog jquery

Posted on 2010-01-02
3
Medium Priority
?
409 Views
Last Modified: 2012-05-08
Hello EE

i have a script javascript for validate a form with alert message.
My problem is:
how i change default alert windows with dialog jquery?

my code is:
function check_01() {
	
	errtxt = "";
	err = 0;
	
	
	//if (document.dgu.glass1.value == "seleziona" ||
	//if (document.dgu.tipology1.value == "seleziona") 	{ err = 1; errtxt += "- Prima Tipologia Vetro\n";	}
	if (document.dgu.glass1.value == "seleziona" || document.dgu.glass1.value == "") 		{ err = 1; errtxt += "- Primo Vetro\n";	}
	if (document.dgu.frame1.value == "seleziona") 		{ err = 1; errtxt += "- Primo Telaio\n";	}
	//if (document.dgu.tipology2.value == "seleziona") 	{ err = 1; errtxt += "- Seconda Tipologia Vetro\n";	}
	if (document.dgu.glass2.value == "seleziona") 		{ err = 1; errtxt += "- Secondo Vetro\n";	}
		
	if (document.dgu.tipology3.value != "seleziona" && (document.dgu.tipology2.value == "seleziona" || document.dgu.tipology1.value == "seleziona"))
	{ err = 1; errtxt += "- Secondo Vetro\n"; }
	
	if (document.dgu.tipology3.value != "seleziona" && document.dgu.frame2.value == "seleziona") { err = 1; errtxt += "- Secondo Telaio\n"; }
	
	if (document.dgu.frame2.value != "seleziona"
		&& document.dgu.tipology3.value == "seleziona") { err = 1; errtxt += "- Terzo Vetro\n"; }
	
	if (document.dgu.qty.value == "")		{ err = 1; errtxt += "- Quantita'\n";	}
	if (document.dgu.w.value == "")			{ err = 1; errtxt += "- Base\n";		}
	if (document.dgu.h.value == "")			{ err = 1; errtxt += "- Altezza\n";		}
	
	if (err) {
		alert("ATTENZIONE!\n\nDEVI inserire:\n"+errtxt);
	} else {
		document.dgu.submit();
	}
	
}

function check_02() {
	errtxt =

Open in new window

0
Comment
Question by:denny3d
  • 2
3 Comments
 
LVL 22

Expert Comment

by:kadaba
ID: 26161012
you could do this way.(without the dialog)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("form").submit(function(){
	  var err = "";	
		$('#errorSpan').html("");
		$('#errorSpan').hide();
      if ($("#test1").val() == "") {
        err=err+"A cannot be empty<br>";
      }

      if ($("#test2").val() == "") {
        err=err+"B cannot be empty<br>";
      }
	if(err){
		$('#errorSpan').html(err);
		$('#errorSpan').show('slow');
		return false;
	}	
      return true;
    });

  });
  </script>
  <style>
  p { margin:0; color:blue; }
  div,p { margin-left:10px; }
  span { color:red; }
  </style>
</head>
<body>
  <span id="errorSpan" style="display:none"></span>
  <form action="javascript:alert('success!');">
    <div>
      A:<input id="test1" type="text" /><br>
	  B:<input id="test2" type="text" /><br>
	
      <input type="submit" value="submit"/>
    </div>
  </form>
</body>
</html>

Open in new window

0
 

Author Comment

by:denny3d
ID: 26161035
Hi Kadaba

but i want use a dialog as alert windows or anything script.

regards
Denny
0
 
LVL 22

Accepted Solution

by:
kadaba earned 2000 total points
ID: 26161039
ok here you go,
you need to do a bit of styling to get it right.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
  <script>
  $(document).ready(function(){
    
    $("form").submit(function(){
	  var err = "";	
		$('#dialog').html("");
		$('#dialog').hide();
      if ($("#test1").val() == "") {
        err=err+"<li>A cannot be empty</li>";
      }

      if ($("#test2").val() == "") {
        err=err+"<li>B cannot be empty</li>";
      }
	if(err){
		$('#dialog').html(err);
		 $("#dialog").dialog();
		return false;
	}	
      return true;
    });

  });
  </script>
  <style>
  p { margin:0; color:blue; }
  div,p { margin-left:10px; }
  span { color:red; }
  </style>
</head>
<body style="font-size:62.5%;">

  <span id="dialog" title="Error Messages"></span>
  <form action="javascript:alert('success!');">
    <div>
      A:<input id="test1" type="text" /><br>
	  B:<input id="test2" type="text" /><br>
	
      <input type="submit" value="submit"/>
    </div>
  </form>
</body>
</html>

Open in new window

0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses
Course of the Month18 days, 6 hours left to enroll

830 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