Scribd
Upload
30 views13 pages

jQuery Validation Steps for Forms

This document provides instructions for form validation in jQuery. It includes: 1) Hiding error messages by default and using flags to track validation status. 2) Attaching validation functions to form input events to check values on change. 3) Defining validation functions to check for empty/invalid values and show error messages. 4) On submit, calling all validation functions and checking flag statuses to determine if the form should submit. Examples of implementing this in both HTML and Spring forms are also provided.

Uploaded by

Learning Online Classes
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views13 pages

jQuery Validation Steps for Forms

This document provides instructions for form validation in jQuery. It includes: 1) Hiding error messages by default and using flags to track validation status. 2) Attaching validation functions to form input events to check values on change. 3) Defining validation functions to check for empty/invalid values and show error messages. 4) On submit, calling all validation functions and checking flag statuses to determine if the form should submit. Examples of implementing this in both HTML and Spring forms are also provided.

Uploaded by

Learning Online Classes
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

by RAGHU SIR[NARESH IT, HYD]

Project Batch# JQuery Validations-


PART#2
SELECTOR :

$("#id")

$(".class")

$("[attribute]")

--Validation Steps----------------------------

UI :

#1. Define Error Section (col-4)

1-row- 12 columns (4 col-label/4-input/4-error)

---------------------------------

Script:

#1. Hide error section

#2. flag(boolean) error section

true = error is not there

false = error is there

#3 Link event/action for input

(click/change/focus/blur/keyup..etc)

#4 Define one function and call inside this event;

#5 Button submit(call a function)

a. reset flags to false

b. call all validate functions

c. check for all flags true or not

1|Page
by RAGHU SIR[NARESH IT, HYD]

if all flags are true -> return true

else return false.

HTML based Example:-

<html>

<head>

<link rel="stylesheet"
href="[Link]

integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<script src="[Link]

integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"

crossorigin="anonymous"></script>

<script src="[Link]

integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"

crossorigin="anonymous"></script>

<script src="[Link]

integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"

crossorigin="anonymous"></script>

</head>

<body>

<div class="container">

<div class="card">

2|Page
by RAGHU SIR[NARESH IT, HYD]

<div class="card-header">

<h3>Welcome to UOM Register page!</h3>

</div>

<div class="card-body">

<form action="save" method="POST">

<div class="row">

<div class="col-4">

<label for="uomType">Uom Type</label>

</div>

<div class="col-4">

<select name="uomType" id="uomType" class="form-control">

<option value="">-SELECT-</option>

<option value="PACKING">PACKING</option>

<option value="NO PACKING">NO PACKING</option>

<option value="NA">NA</option>

</select>

</div>

<div class="col-4">

<span id="uomTypeError"></span>

</div>

</div>

<div class="row">

3|Page
by RAGHU SIR[NARESH IT, HYD]

<div class="col-4">

<label for="uomModel">Uom Model</label>

</div>

<div class="col-4">

<input type="text" name="uomModel" id="uomModel" class="form-control"/>

</div>

<div class="col-4">

<span id="uomModelError"></span>

</div>

</div>

<div class="row">

<div class="col-4">

<label for="note">Uom Description</label>

</div>

<div class="col-4">

<textarea class="form-control" name="note" id="note"></textarea>

</div>

<div class="col-4">

<span id="noteError"></span>

</div>

</div>

<input type="submit" value="Register" id="register" class="btn btn-primary"/>

</form>

4|Page
by RAGHU SIR[NARESH IT, HYD]

</div>

</div>

</div>

<script>

$(document).ready(function(){

//1. Hide Error section

$("#uomModelError").hide();

$("#noteError").hide();

$("#uomTypeError").hide();

//2. Define flag for error section

var uomModelError = false;

var noteError = false;

var uomTypeError = false;

//3. Link with action/event

$("#uomModel").keyup(function(){

validate_uomModel();

});

$("#note").keyup(function(){

validate_note();

});

5|Page
by RAGHU SIR[NARESH IT, HYD]

$("#uomType").change(function(){

validate_uomType();

});

//4. drfine one validation function

function validate_uomModel(){

var val=$("#uomModel").val();

if(val==''){

$("#uomModelError").show();

$("#uomModelError").html("Enter <b>UOM MODEL</b>")

$("#uomModelError").css("color","red");

uomModelError = false;

}else{

$("#uomModelError").hide();

uomModelError = true;

return uomModelError;

function validate_note(){

var val=$("#note").val();

if(val==''){

$("#noteError").show();

$("#noteError").html("Enter <b>UOM DESCRIPTION</b>");

6|Page
by RAGHU SIR[NARESH IT, HYD]

$("#noteError").css("color","red");

noteError = false;

}else{

$("#noteError").hide();

noteError = true;

return noteError;

function validate_uomType(){

var val=$("#uomType").val();

if(val==''){

$("#uomTypeError").show();

$("#uomTypeError").html("Choose <b>UOM TYPE</b>");

$("#uomTypeError").css("color","red");

uomTypeError = false;

}else{

$("#uomTypeError").hide();

uomTypeError = true;

return uomTypeError ;

7|Page
by RAGHU SIR[NARESH IT, HYD]

// on click submit button

$("#register").click(function(){

//on click submit button

//a. reset flags to false

uomModelError = false;

noteError = false;

uomTypeError = false;

//b. call all validate function

validate_uomModel();

validate_note();

validate_uomType();

//c. check if all are true then submit else dont

if(uomModelError && noteError && uomTypeError){

return true;

else return false;

});

});

</script>

8|Page
by RAGHU SIR[NARESH IT, HYD]

</body>

</html>

Spring Form Based Exmaple:

<%@taglib prefix="form"
uri="[Link]
<html>
<head>
</head>
<body>
<%@include file="[Link]"%>
<div class="container">
<div class="card">
<div class="card-header bg-primary text-
white">
<h1>Welcome to Uom Register Page</h1>
</div>
<div class="card-body">
<form:form id="myForm" action="save"
method="POST"
modelAttribute="uom">
<!--new Row -->
<div class="row">
<div class="col-4">
<label for="uomType">
UOMTYPE</label>
</div>
<div class="col-4">
<form:select path="uomType"
class="form-control">
<form:option value="">-
SELECT-</form:option>
<form:option
value="PACKING">PACKING</form:option>
<form:option value="NO
PACKING">NO PACKING</form:option>

9|Page
by RAGHU SIR[NARESH IT, HYD]

<form:option value="-
NA-">-NA-</form:option>
</form:select>
</div>
<div class="col-4"
id="uomTypeError"></div>
</div>
<!--new Row -->
<div class="row">
<div class="col-4">
<label for="uomModel">
UOMMODEL</label>
</div>
<div class="col-4">
<form:input path="uomModel"
class="form-control" />
</div>
<div class="col-4"
id="uomModelError"></div>
</div>
<!--new Row -->
<div class="row">
<div class="col-4">
<label for="note">
NOTE</label>
</div>
<div class="col-4">
<form:textarea path="note"
class="form-control" />
</div>
<div class="col-4"
id="noteError"></div>
</div>
<input type="submit" value="Register"
id="register" class="btn btn-success" />
</form:form>
</div>
<div class="card-footer bg-info text-white">
<b>${message}</b>

10 | P a g e
by RAGHU SIR[NARESH IT, HYD]

</div>
</div>
</div>

<script>
$(document).ready(function(){
//1. Hide Error section
$("#uomModelError").hide();
$("#noteError").hide();
$("#uomTypeError").hide();

//2. Define flag for error section


var uomModelError = false;
var noteError = false;
var uomTypeError = false;

//3. Link with action/event


$("#uomModel").keyup(function(){
validate_uomModel();
});

$("#note").keyup(function(){
validate_note();
});

$("#uomType").change(function(){
validate_uomType();
});

//4. drfine one validation function


function validate_uomModel(){
var val=$("#uomModel").val();
if(val==''){
$("#uomModelError").show();
$("#uomModelError").html("Enter <b>UOM
MODEL</b>")
$("#uomModelError").css("color","red");
uomModelError = false;

11 | P a g e
by RAGHU SIR[NARESH IT, HYD]

}else{
$("#uomModelError").hide();
uomModelError = true;
}
return uomModelError;
}

function validate_note(){
var val=$("#note").val();
if(val==''){
$("#noteError").show();
$("#noteError").html("Enter <b>UOM
DESCRIPTION</b>");
$("#noteError").css("color","red");
noteError = false;
}else{
$("#noteError").hide();
noteError = true;
}

return noteError;
}

function validate_uomType(){
var val=$("#uomType").val();

if(val==''){
$("#uomTypeError").show();
$("#uomTypeError").html("Choose <b>UOM
TYPE</b>");
$("#uomTypeError").css("color","red");
uomTypeError = false;
}else{
$("#uomTypeError").hide();
uomTypeError = true;
}
return uomTypeError ;
}

12 | P a g e
by RAGHU SIR[NARESH IT, HYD]

// on click submit button


$("#register").click(function(){
//on click submit button

//a. reset flags to false


uomModelError = false;
noteError = false;
uomTypeError = false;

//b. call all validate function


validate_uomModel();
validate_note();
validate_uomType();

//c. check if all are true then submit else dont


if(uomModelError && noteError && uomTypeError){
return true;
}
else return false;

});

});
</script>
</body>
</html>

13 | P a g e

You might also like