I'm developing a simple login form but with advanced features in that. On submitting the form I want to validate it with AJAX and display the error message in the respective "SPAN class="error". The problem is i'm not getting the validation error when i submit the form. The following is the code i've tried. Please help..
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="_images/Favicon.png"/>
<title>18+</title>
<link href="_css/login.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="_scripts/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#username').focus(); Focus to the username field on body loads
$('#submit').click(function(){ // Create `click` event function for login
var username = $('#username'); // Get the username field
var password = $('#password'); // Get the password field
var login_result = $('.login_result'); // Get the login result div
var username = $('.username'); // Get the username error div
var password = $('.password'); // Get the password error div
if(username.val() == ''){ // Check the username values is empty or not
username.focus(); // focus to the filed
username.html('<span class="error">Enter the Username...</span>');
return false;
}
if(password.val() == ''){ // Check the password values is empty or not
password.focus();
password.html('<span class="error">Enter Your Password...</span>');
return false;
}
if(username.val() != '' && password.val() != ''){
var UrlToPass = 'action=login&username='+username.val()+'&password='+password.val();
$.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
type : 'POST',
data : UrlToPass,
url : 'checker.php',
success: function(responseText){ // Get the result and asign to each cases
if(responseText == 0){
login_result.html('<span class="error">The Username Or Password You Entered Is Incorrect...</span>');
}
else if(responseText == 1){
window.location = 'admin.php';
}
else{
alert('Problem with sql query');
}
}
});
}
return false;
});
});
</script>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div id="form">
<form action="" method="post" id="user_login" name="user_login" enctype="multipart/form-data">
<p id="head">User Login</p>
<div class="row">
<span class="error" class="login_result" id="login_result"></span>
</div>
<div class="row">
<div class="input">
<input type="text" id="username" name="username" class="detail" placeholder="Username" spellcheck="false" title="Enter Your Username.."/>
<span class="error" id="username">Enter Your Username....</span>
</div>
</div>
<div class="row">
<div class="input">
<input type="password" id="password" name="password" class="detail" placeholder="Password" spellcheck="false" title="Enter Your Password.."/>
<span class="error" id="password">Enter Your Password...</span>
</div>
</div>
<p class="submit">
<button type="submit" id="submit" name="submmit" value="Register">Login</button>
</p>
</form>
</div>
</div>
</div>
</div><!--end container-->
<div id="formfooter">
<div class="input">
Copyright © CompanyName.
</div>
</div>
</body>
</html>
You should prevent the default action when you catch the event in javascript:
....
$('#submit').click(function(e){ // Create `click` event function for login
e.preventDefault(); //Prevent the default submit action of the form
var username = $('#username'); // Get the username field
var password = $('#password'); // Get the password field
var login_result = $('.login_result'); // Get the login result div
....
First, you have two same ids on your HTML form.
<input type="text" id="username" .../>
<span class="error" id="username">....
Take a look above and you can see that there are two ids username. You should change the id attribute with class attribute so it become
<span class="error" class="username">....
Second, on your javascript you have same variables assigning.
var username = $('#username');
var password = $('#password');
.....
var username = $('.username');
var password = $('.password');
Username and password are already taken. Change that into different variable name.
Third, I suggest you to use this awesome jquery form validation library http://jqueryvalidation.org/
Good luck :)
Related
I've put together a codebase that successfully calls Ajax to a PHP server which issues requests to a database. I'm very new to this, but I've been able to successfully update rows in the SQL.
The good news is it doesn't update that row if there are already values in email, name, and redeem time columns. How do I cause the program to make errors if the coupon code has already been redeemed, though?
Is using a test query a possible approach? Or should I try to set up a separate Ajax request..possibly a Get to do a comparative evaluation on submission with the values in the form? But even if that is the case I have no idea how to actually implement that sort of conditional in PHP. Thanks if you have any advice.
//user_process.php
<?php
$con = mysqli_connect(); //<--redacted ;D
//first, test with what should be in the db
//with defaults.
$testcode=$_GET["code"];
$testname="Unredeemed";
$testemail="N/a";
$testredeemed="0000/00/00 00:00:00";
$testquery=mysqli_query($con,"SELECT code,name,email,redeemed FROM codestore WHERE code='$testcode', name='$testname', email='$email', redeemed='$testredeemed'");
if($testcode){
if(!$testquery){
die("Er");
}
}
$code=$_POST["code"];
$name=$_POST["name"];
$email=$_POST["email"];
$redeemed=$_POST["redeemed"];
$query=mysqli_query($con,"UPDATE codestore SET name='$name', email='$email', redeemed='$redeemed' WHERE code='$code',name='Unredeemed',email='N/a',redeemed='0000/00/00 00:00:00'");
if($query){
echo "Your comment has been sent";
}
else{
echo "Error in sending your comment";
}
?>
//user_index.js
function formatDate(date) {
//deleted for readability
}
$("#submit").click(function (event) {
$(".main-content").append("<?php require 'user_process.php';?> ");
// if() each has a value else alert error
var currentDateTime = new Date();
var redeemedOn = formatDate(currentDateTime);
var code = $("#code").val();
var name = $("#name").val();
var email = $("#email").val();
$.ajax({
type: "post"
, url: "user_process.php"
, data: "code=" + code + "&name="+name+"&email="+email+"&redeemed="+redeemedOn
, success: function (data) {
$("#info").html(data);
}
, error: function(){
alert("That code is invalid or has already been redeemed!")
}
});
});
//index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="/demo_mini.css">
<title>Search Contacts</title>
</head>
<body>
<div class="main-content">
<form class="form-basic">
<div class="form-row"> <span>Enter your code </span>
<input type="text" name="code" id="code"> </div>
<div class="form-row"> <span>Full Name </span>
<input type="text" name="name" id="name"> </div>
<div class="form-row"> <span>Email</span>
<input type="text" name="email" id="email"> </div>
<div class="form-row">
<button id="submit">Redeem!</button>
</div>
<div id="info" /> </form>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/user_index.js"></script>
</body>
</html>
I have 9 pictures on each page, and when someone clicks on a picture the picture is opened in a fancybox, then if a person wants more information about the piece the click on a link inside the fancybox and the form opens inside a modal box.
All of the code works and the form is send through ajax then php.
The problem that I have is that all 9 pictures open the same form and when I client fills out the request form with their contact information, there is no way of me knowing which photo they are looking at.
It would be nice to add a "Hidden" value that is sent with the form so I can know which photo they are requesting the information.
I have looked around SO but to no avail
basic form
<div id="inline">
<form id="contact" name="contact" action="sendmessage.php" method="post">
<label for="name">Your Name </label>
<input type="text" id="name" name="name" class="txt">
<br>
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="msg">Enter a Message</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send Request</button>
</form>
link to photo
<a class="fancybox" rel="gallery" href="inventory/inv_pictures/pic4.jpg"><img
src="inventory/inv_thumbs/thumb4.jpg" alt="Antique Furniture - Pic 4"
id="gallery"/></a>
I figured that maybe there is away to add a title tag or use the alt tag under the tag
that the form can pick up and send it as a "hidden" item. That way each photo can still access the same form but then I can know which item they are requesting for.
Sorry for not posting the whole code for fancy box.
but here it is:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<link rel="stylesheet" href="../js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="../js/source/jquery.fancybox.pack.js?v=2.1.5"> </script>
<script type="text/javascript">
$(".fancybox").fancybox({
afterLoad: function() {
this.title = '<a class="modalbox" href= "#inline" >Request more information</a> ' + this.title;
},
helpers : {
title: {
type: 'inside'
}
}
});
</script>
<!-- Hidden inline form -->
<div id="inline">
<form id="contact" name="contact" action="sendmessage.php" method="post">
<label for="name">Your Name </label>
<input type="text" id="name" name="name" class="txt">
<br>
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="msg">Enter a Message</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<input type="hidden" id="link" name="link" value="">
<button id="send">Send Request</button>
</form>
</div>
<script type="text/javascript">
function validateEmail(email) {
var reg = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\ [[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var nameval = $("#name").val();
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
var namelen = nameval.length;
if(namelen < 2) {
$("#name").addClass("error");
}
else if(namelen >= 2) {
$("#name").removeClass("error");
}
if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}
if(msglen < 4) {
$("#msg").addClass("error");
}
else if(msglen >= 4){
$("#msg").removeClass("error");
}
if(mailvalid == true && msglen >= 4 && namelen >= 2) {
// if both validate we attempt to send the e-mail
// first we hide the submit btn so the user doesnt click twice
$("#send").replaceWith("<em>sending...</em>");
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact").fadeOut("fast", function(){
$(this).before("<p> <strong>Success! Your request has been sent. We will respond to it as soon as possible. </strong></p>");
setTimeout("$.fancybox.close()", 3000);
});
}
}
});
}
});
});
</script>
As I can see the link you are giving to fancybox is a direct link to a picture.
I am confused how you get a link to the form inside the modal as it doesn't seem to be coded here.
What I would suggest is, instead of giving direct picture link, create another page and code that page to collect a pic url/id from by GET/POST and display the corresponding pic and then embed this page into the fancybox.
So basically what I am saying is, pass the pic id/path from url that you pass to the fancybox, collect it and then further pass it to the form link
I'm new to jQuery and I'm trying to use it to validate a login form. However, the validation script doesn't activate: it just sits there doing nothing, while disabling the submit button. I think it is interfering with another script running on the same form, which lets the user switch between different forms in the same div.
Here's the html:
<div class="box">
<?php if (isset($_SESSION['login'])){ ?>
<h2>Welcome back, <?php echo $_SESSION['username']; ?></h2>
<div><p>Click here to log outt</p></div>
<?php } else { ?>
<div id="form_wrapper" class="form_wrapper">
<div class="register"> <!-- First form -->
<form id="registrationform">
<h2>Register</h2>
<div class="box">
<div>
<label>Name:</label>
<input name="nomeagenzia" type="text" required />
</div>
<!-- Some other input fields -->
<input type="submit" value="Register" />
Already a user? Login here
</div>
</form>
</div>
<div class="login active"> <!-- Second form, the one I'm validating-->
<form id="loginform" action="index.php" method="POST">
<h2>Area Agenzie</h2>
<div class="box">
<div>
<label>Username:</label>
<input name="username" type="text" />
</div>
<div style="position:relative;">
<label>Password:</label>
Forgot your password?
<input name="password" type="password" />
</div>
<input name="submit" type="submit" value="Login" />
Register here!
</div>
</form>
</div>
<!-- There's a third form I omitted -->
</div>
<?php } ?>
</div>
Here is the javascript to switch between the forms:
$(function() {
var $form_wrapper = $('#form_wrapper'),
$currentForm = $form_wrapper.children('div.active'),
$linkform = $form_wrapper.find('.linkform');
$form_wrapper.children('div').each(function(i){
var $theForm = $(this);
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
setWrapperWidth();
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(100,function(){
$currentForm.removeClass('active');
$currentForm= $form_wrapper.children('div.'+target);
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},225,function(){
$currentForm.addClass('active');
$currentForm.fadeIn(100);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
});
Here's the validation script:
$(document).ready(function()
{
$("#loginform").validate(
{
rules:{
'username':{
required: true,
remote:{
url: "php/validatorAJAX.php",
type: "post"
}
},
'password':{
required: true
}
},
messages:{
'username':{
required: "Il campo username è obbligatorio!",
remote: "L'username non esiste!"
},
'password':{
required: "Il campo password è obbligatorio!"
}
},
submitHandler: function(form){
if($(form).valid())
form.submit();
return false;
}
});
});
Finally, this is validatorAJAX.php included in the validation script:
<?php
$mysqli = new mysqlc();
function usernameExists($username){
$username = trim($username);
$stmt = $mysqli->prepare("SELECT COUNT(*) AS num FROM utenti WHERE username= ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt->bind_result($result);
$result = (bool)$stmt->fetch();
$stmt->close();
return $result;
}
if(isset($_POST['username'])){
if(usernameExists($_POST['username'])){
echo 'true';
}else{
echo 'false';
}
}
?>
You can test out the script at http://pansepol.com/NEW, and you'll see that nothing happens when you click "Submit" on the login_form. Moreover, no validation is done whatsoever. I'm going nuts here :)
I fixed it: there was a problem with the validatorAJAX.php, which causes the whole form to crash. Basically the mysqli object was initialized outside the function, and this caused the validation to fail.
I have a login form in php. I have used ajaxform so that the page does not get reloaded when the username or password is wrong. I have another page checklogin.php which checks whether the username and pw is there in the database and it returns the count of the number of rows. I want to compare the count in the login.php and display the error message if the count=1 and redirect to another page if count=2. I tried to display the count in an errordiv using target: 'errordiv' and checking its innerHTML but it failed to do so.
My login.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<!--Slider-in icons-->
<script type="text/javascript">
function checklogin()
{
var request=$("#login-form").ajaxForm(
{
target:'#errordiv'
}).abort();
request.submit();
var divmsg=document.getElementById("errordiv");
if (divmsg.childNodes[0].nodeValue == "1")
{
divmsg.childNodesp[0].nodeValue="Sorry";
alert ("Invalid username or password");} //I didn't get the alert as well a the divmsg content didn't change
};
</script>
</head>
<body>
<!--WRAPPER-->
<div id="wrapper">
<!--LOGIN FORM-->
<form name="login-form" id="login-form" class="login-form" action="checklogin.php" method="post">
<!--CONTENT-->
<div class="content">
<!--USERNAME--><input name="un" type="text" class="input username" placeholder="Username" onfocus="this.value=''" required="required" /><!--END USERNAME-->
<!--PASSWORD--><input name="pw" type="password" class="input password" placeholder="Password" onfocus="this.value=''" required="required" /><!--END PASSWORD-->
</div>
<!--END CONTENT-->
<!--FOOTER-->
<div class="footer">
<!--LOGIN BUTTON--><input type="submit" name="submit" value="Login" class="button" onclick="checklogin()" /><!--END LOGIN BUTTON-->
</div>
<!--END FOOTER-->
</form>
<div id="errordiv" class="errordiv"></div>
<!--END LOGIN FORM-->
checklogin.php
<?php
include ('dbconn.php');
$user = trim($_POST['un']);
$pass = trim($_POST['pw']);
$user = mysql_real_escape_string($user);
$pass = mysql_real_escape_string($pass);
$result=mysql_query("select Id from login where Username='$user' and Password='$pass'") or die (mysql_error());
$result= mysql_fetch_assoc($result);
$num= count ($result);
echo $num;
?>
How can I get the value of $num in login.php without displaying it to a div and compare the value of $num and accordingly display the errormsg in errordiv or if $num==2 redirect to another page.
Change your code to include the code which change the div and provide alert to be included in the callback.
var request=$("#login-form").ajaxForm(
{
target:'#errordiv',
success: function (html) {
if ($("#errordiv).html() == "1") {
$("#errordiv).html("Sorry");
alert ("Invalid username or password");
}
}
}).abort();
request.submit();
Maybe try to make the checking request asynchronously and process user feedback in AJAX callback:
JS:
$(function(){
$("#login-form").ajaxForm(function(response){
if(response.count===1){
$("#errordiv").html("msg you want to show");
}else if(response.count===2){
//redirect
}
});
});
php:
<?php
header("Content-Type: application/json");
//your database check logic
$user = trim($_POST['un']);
$pass = trim($_POST['pw']);
$user = mysql_real_escape_string($user);
$pass = mysql_real_escape_string($pass);
$result=mysql_query("select Id from login where Username='$user' and Password='$pass'") or die (mysql_error());
$result= mysql_fetch_assoc($result);
$num= count ($result);
//and return response in JSON
echo json_encode(array("count"=>$num));
?>
Hope this is helpful for you.
[EDIT]
remove the form submit button inline JS function invoking:
onclick="checklogin()"
and put checklogin function logic to document ready callback, initialize the form when the DOM is ready
I have a mobile website and everything is working fine except for the validation. Basically I'm looking to take values from the user and then process them on a separate page (process.php). However, before doing so I need to check to make sure the fields have been populated. I have looked at several ways to do this but none seem to be working. I have the below code at the moment. When I press the process button it brings me through to the process.php splash screen even though the item field is empty. It doesn't write to the database but I would rather it didn't bring the user to the process.php screen until all mandatory fields have been filled in. Any ideas?
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#formL").validate(); });
</script>
<div data-role="content">
<form id="formL" action="/website/process.php" method="post">
<div data-role="fieldcontain">
<label for="item">
<em>* </em> <b>Item:</b> </label>
<input type="text" id="item" name="item" class="required" />
</div>
<div class="ui-body ui-body-b">
<button class="buttonL" type="submit" data-theme="a">Process</button>
</div>
</form>
</div>
For a small form like that, I wouldn't bother using a plugin - is it even compatible with jQuery Mobile? Anyway, to get you started, here's a simple way to prevent submission when there are empty fields:
$("#formL").submit(function() {
// get a collection of all empty fields
var emptyFields = $(":input.required").filter(function() {
// $.trim to prevent whitespace-only values being counted as 'filled'
return !$.trim(this.value).length;
});
// if there are one or more empty fields
if(emptyFields.length) {
// do stuff; return false prevents submission
emptyFields.css("border", "1px solid red");
alert("You must fill all fields!");
return false;
}
});
You can try it/mess with it here.
I have ran across the same problem you have, I have my form validating correctly now.
The following is what I have done with Jquery Mobile -->
<link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.css" />
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/list.css">
<!--For Icon to bookmark on phones-->
<link rel="apple-touch-icon-precomposed" href=""/>
<script>
var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar = null;
var stateLabelVar = null;
var whatLabelVar = null;
var stateVar = null;
var whatVar = null;
var form1var = null;
var confirmationVar = null;
var contentDialogVar = null;
var hdrConfirmationVar = null;
var contentConfirmationVar = null;
var ftrConfirmationVar = null;
var inputMapVar = null;
// Constants
var MISSING = "missing";
var EMPTY = "";
var NO_STATE = "ZZ";
</script>
<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">
</div>
<div data-role="content" id="logo" align="center">
<img src="img/sam_mobile.png">
</div>
<div data-role="content" id="contentMain" name="contentMain">
<form id="form1">
<div id="userDiv" data-role="fieldcontain">
<label for="userName">User Name*</label>
<input id="userName" name="userName_r" type="text" />
</div>
<div id="passwordDiv" data-role="fieldcontain">
<label for="password" id="passwordLabel" name="passwordLabel">Password*</label>
<input id="password" name="password_r" type="password" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<input type="submit" value="Login" data-inline="true"/>
</div>
</form>
</div><!-- contentMain -->
<div data-role="footer" id="ftrMain" name="ftrMain"></div>
<div align="CENTER" data-role="content" id="contentDialog" name="contentDialog">
<div>You must fill in both a user name and password to be granted access.</div>
<a id="buttonOK" name="buttonOK" href="#page1" data-role="button" data-inline="true">OK</a>
</div> <!-- contentDialog -->
<!-- contentTransition is displayed after the form is submitted until a response is received back. -->
<div data-role="content" id="contentTransition" name="contentTransition">
<div align="CENTER"><h4>Login information has been sent. Please wait.</h4></div>
<div align="CENTER"><img id="spin" name="spin" src="img/wait.gif"/></div>
</div> <!-- contentTransition -->
<div data-role="footer" id="ftrConfirmation" name="ftrConfirmation"></div>
<script>
$(document).ready(function() {
//Assign global variables from top of page
hdrMainVar = $('#hdrMain');
contentMainVar = $('#contentMain');
ftrMainVar = $('#ftrMain');
contentTransitionVar = $('#contentTransition');
stateLabelVar = $('#stateLabel');
whatLabelVar = $('#whatLabel');
stateVar = $('#state');
whatVar = $('#what');
form1Var = $('#form1');
confirmationVar = $('#confirmation');
contentDialogVar = $('#contentDialog');
hdrConfirmationVar = $('#hdrConfirmation');
contentConfirmationVar = $('#contentConfirmation');
ftrConfirmationVar = $('#ftrConfirmation');
inputMapVar = $('input[name*="_r"]');
hideContentDialog();
hideContentTransition();
hideConfirmation();
});
$('#buttonOK').click(function() {
hideContentDialog();
showMain();
return false;
});
$('#form1').submit(function() {
//Start with false to hide specific div tags
var err = false;
// Hide the Main content
hideMain();
// Reset the previously highlighted form elements
stateLabelVar.removeClass(MISSING);
whatLabelVar.removeClass(MISSING);
inputMapVar.each(function(index){
$(this).prev().removeClass(MISSING);
});
// Perform form validation
inputMapVar.each(function(index){
if($(this).val()==null || $(this).val()==EMPTY){
$(this).prev().addClass(MISSING);
err = true;
}
});
if(stateVar.val()==NO_STATE){
stateLabelVar.addClass(MISSING);
err = true;
}
// If validation fails, show Dialog content
if(err == true){
showContentDialog();
return false;
}
// If validation passes, show Transition content
showContentTransition();
// Submit the form
$.post("requestProcessor.php", form1Var.serialize(), function(data){
//DB Validation goes here when we link to the Db
confirmationVar.text(data);
hideContentTransition();
window.location="access.php";
});
return false;
});
function hideMain(){
hdrMainVar.hide();
contentMainVar.hide();
ftrMainVar.hide();
}
function showMain(){
hdrMainVar.show();
contentMainVar.show();
ftrMainVar.show();
}
function hideContentTransition(){
contentTransitionVar.hide();
}
function showContentTransition(){
contentTransitionVar.show();
}
function hideContentDialog(){
contentDialogVar.hide();
}
function showContentDialog(){
contentDialogVar.show();
}
function hideConfirmation(){
hdrConfirmationVar.hide();
contentConfirmationVar.hide();
ftrConfirmationVar.hide();
}
function showConfirmation(){
hdrConfirmationVar.show();
contentConfirmationVar.show();
ftrConfirmationVar.show();
}
</script>
This will not allow the form to be submitted if there is empty fields. Feel free to take this code and manipulate and play with it as much as you like. As you can see I used a .php file, just like you, to handle the validation of the user.