ProjectBatch11AM 11012021

Date : 11/01/2021
Project batch 11AM

Mr. RAGHU
-------------------
Pattern:- Format of Input data given by end user.
Example Pattern:
Email Pattern : ___ @___.__
PanCard Pattern: AAAA8888L
..etc
Symbols used in Patterns:

[ ] - allowed chars
+ - min 1, max -n
* - min 0, max -n (n-no limit)
? - min 0, max -1
None - min-1, max-1
{x} - min-max-x times

{x,y} - min-x, max-y times
---Examples--------------------------------------
1.
[A-Z]{5,10}
=> Inside Text input, we can enter only Uppercase
characters, min-5 char and max-10 char.
Inputs:
SAM (invaild) -- Min size not reached
ajaymn (invaild) -- only Uppercase chars
AB12CD (invaild) -- Numbers are not allowed
2.
[0-9]{2,6}
=> Inside Text input, we can enter only
digits only. Min-2 digits and max-6. digits
Inputs:
6565 (Valid)
abcd (invalid) Only Digits allowed
3. [a-z]+
Allowed chars are lower case a-z
and at least one char, at most n chars
min-1, max-no limit
Input:
sample (valid)
123 (invalid)
4. [A-Z] (no symbol Min=max=1 (Exactly one char)
Input:
Y (valid)
N (valid)
q (invalid) only Uppercase
5. [A-Z][a-z]
For first box 1 char
For 2nd box 1 char
Exactly 2 chars, First one Uppercase
and 2nd must be lowercase
Input:
Jai (Invalid) Size 2 chars only
Hi (Valid)
6. [a-z]?
Allowd chars a-z only. Min-zero and max- one
Input
(Entered Nothing) (Valid)
m (valid)
T (invalid)
7. [A-Z]*
Allowed only Uppercase Min-zero, max-n no limit
Input:
DATA (VALID)
(No Input) (Valid)
SAM SUNG (INVALID) Space is not allowed
8. [A-Z]? [0-9]+ [a-z]{3}

=> It may(or may not) start with Uppercase
(?-min=0/max-1)
=> Must have at least one digit (+ min-1,max-n)
=> Must ends with 3 lowercase chars only.
Input:
A2aws (Valid)
989898axe (Valid)
404not (Valid)
Rat86 (Invalid) -After uppercase, next thing must be digits
and must end with 3 chars
9. [a-zA-Z0-9]{3,5}
=> We can enter any of lower,upper chars and digits in
any order. Must be 3-5 chars only.
No need to have all chars in order.
Input:
Som23 (Valid)
ajay (Valid)
9999 (Valid)
SAMAB (Valid)
10. [a-z][A-Z][0-9]
1 cha + 1 char + 1 digit = 3 char (min/max)
Order must be followed.
Input:
aA2 (Valid)
A9y (Invalid) -- Order must be followed
abZY99 (Invalid) -- Size min/max-3 only
11.
[a-zA-Z]?[A-Z0-9]+[a-z0-9]*
Inputs:
AJAY (Valid)
Form 1st box i have taken - A

From 2nd boax(min-1,max-n) i have taken JAY
From last box(min-0,max-n) i have taken nothing
gOOgle (Valid)
hAPPy2021 (Valid)
-------------------------------------------------
JQuery Validation Steps
--HTML/Body--
Define one row
-> col-3 Label
-> col-4 Form Input
-> col-5 Span(erro) section
--Script--
1. hide Error section
2. define error variable
3. function- validate
4. link with event
Q) What is test() function in JS?

A) It is used to compare given pattern(expression)
with user input, if matching it returns true
else returns false.
Display Error message if it retuns false.
-----------------------------------------
Form Submit:-
When we click on form submit, we should validate
all Inputs, If their error variables are
returning true then Submit Form(return true).
If any one error variable is false. Then do not
submit form (return false).
--code modifications---
1. At Form tag level - add id
<form id="stdForm" .... </form>
2. Add submit button

<input type="submit" value="Add" class="btn btn-success"/>
3. Add on click submit function
$("#stdForm").submit(function () {
//call all validate function
//if (errorVariable) all truen return true
else false;
});
-> true means submit form to server

-> false means do not submit form.
---Example--------
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<h3>Student Register Form</h3>
<form id="stdForm" action="#" method="POST">
<div class="row">
<div class="col-3">
<label>NAME</label>
</div>
<div class="col-4">
<input type="text" name="stdName" id="stdName" class="form-
control" />
</div>
<div class="col-5">
<span id="stdNameError"></span>
</div>
</div>
<input type="submit" value="Add" class="btn btn-success"/>
</form>
</div>
<script type="text/javascript">
$(document).ready(function () {
//1. hide error section
$("#stdNameError").hide();
//2. define error variable

var stdNameError = false;
//3. validate function

function validate_stdName() {
//a. Read Form Input
var val = $("#stdName").val();
var exp = /^[A-Z]{3,5}$/;
//b. Check for empty value

if (val == '') {
$("#stdNameError").show();
$("#stdNameError").html("*Enter <b>Student Name </b>");
$("#stdNameError").css('color', 'red');
stdNameError = false;
}
//c. check for expression
else if (!exp.test(val)) {
//if value is not matching with exp
$("#stdNameError").show();
$("#stdNameError").html("*Enter <b>only 3-5 Uppercase chars
</b>");
$("#stdNameError").css('color', 'red');
stdNameError = false;
}
else {
$("#stdNameError").hide();
stdNameError = true;
}
//d. else return true and hide error section
return stdNameError;
}
//4. Link with event

$("#stdName").keyup(function () {
$(this).val($(this).val().toUpperCase());
validate_stdName();
});
//5. on submit
$("#stdForm").submit(function () {
//call all validate functions
validate_stdName();
if (stdNameError) {
return true; //submit form to server
} else {
return false; //do not submit
}
});
});
</script>
</body>
</html>
------------------------------------------
Task:
1. Employee name: only accept a-z/A-Z (min-5,max-12)
2. ProductCode : Lowercase chars (a-z) and digits

Minxing of chars and digits not allowed
start with chars and the ends with digits
Min 4-6 Char and 5-10 Digits
Also implement on Submit.

ProjectBatch11AM 11012021

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ProjectBatch11AM 11012021

Uploaded by

Copyright:

Available Formats

Date : 11/01/2021

Project batch 11AM

Symbols used in Patterns:

{x} - min-max-x times

4. [A-Z] (no symbol Min=max=1 (Exactly one char)

8. [A-Z]? [0-9]+ [a-z]{3}

Form 1st box i have taken - A

Q) What is test() function in JS?

Display Error message if it retuns false.

<form id="stdForm" .... </form>

2. Add submit button

3. Add on click submit function

-> true means submit form to server

//2. define error variable

//3. validate function

//b. Check for empty value

//4. Link with event

2. ProductCode : Lowercase chars (a-z) and digits

Also implement on Submit.

You might also like