Scribd
Upload
53 views

ProjectBatch11AM 11012021

asdff

Uploaded by

jhansi rani
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
53 views

ProjectBatch11AM 11012021

asdff

Uploaded by

jhansi rani
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like