Want to become a Vibe Coder? Join Vibe Coding Training here
x
C# Corner
Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Required Validation in JavaScript AngularJS
WhatsApp
Manish Pipaliya
May 05
2015
1.2
k
0
1
Html File
<
div
class
=
"form-group"
ng-show
=
"edit5"
ng-hide
=
"false"
>
<
label
class
=
"col-sm-2 control-label"
>
First Name:
</
label
>
<
div
class
=
"col-sm-2"
>
<
input
type
=
"text"
id
=
"fname"
name
=
"fName"
ng-model
=
"fName"
placeholder
=
"First Name"
class
=
"form-control"
/>
</
div
>
</
div
>
<
div
class
=
"form-group"
ng-show
=
"edit5"
ng-hide
=
"false"
>
<
label
class
=
"col-sm-2 control-label"
>
Last Name:
</
label
>
<
div
class
=
"col-sm-2"
>
<
input
type
=
"text"
id
=
"lname"
name
=
"lname"
ng-model
=
"lName"
placeholder
=
"Last Name"
class
=
"form-control"
/>
</
div
>
</
div
>
<
div
class
=
"form-group"
ng-show
=
"edit5"
ng-hide
=
"false"
>
<
label
class
=
"col-sm-2 control-label"
>
Phone Number:
</
label
>
<
div
class
=
"col-sm-2"
>
<
input
type
=
"text"
id
=
"phone"
name
=
"phone"
ng-model
=
"phone"
placeholder
=
"Phone Number"
class
=
"form-control"
/>
</
div
>
</
div
>
<
div
class
=
"form-group"
ng-show
=
"edit7"
ng-hide
=
"false"
>
<
label
class
=
"col-sm-2 control-label"
>
Image:
</
label
>
<
div
class
=
"col-sm-2"
>
<
input
class
=
"file"
type
=
"file"
file-model
=
"myFile"
id
=
"myFile"
/>
<
button
type
=
"button"
ng-click
=
"uploadFile()"
class
=
"btn btn-primary"
>
<
span
class
=
"glyphicon glyphicon-upload"
>
Upload File
</
span
>
</
button
>
<
br
/>
</
div
>
</
div
>
<
div
class
=
"col-sm-10"
ng-show
=
"remove"
ng-hide
=
"true"
style
=
"margin-left:150px"
>
<
img
id
=
"getimg"
height
=
"100px"
width
=
"100px"
class
=
"img-thumbnail col-xs-6 col-md-3"
alt
=
"Responsive image"
/>
<
button
type
=
"button"
class
=
"btn btn-info"
id
=
"Remov"
ng-click
=
"removefile()"
ng-show
=
"remove1"
ng-hide
=
"false"
>
<
span
class
=
"glyphicon glyphicon-remove"
>
</
span
>
Remove
</
button
>
</
div
>
<
div
class
=
"form-group"
style
=
"margin-left:300px"
>
<
input
type
=
"text"
id
=
"hid"
name
=
"hid"
ng-model
=
"hid"
ng-hide
=
"true"
/>
</
div
>
<
button
class
=
"btn btn-primary"
ng-click
=
"SaveData()"
>
<
span
class
=
"glyphicon glyphicon-save"
>
</
span
>
Save Data
</
button
>
<
button
id
=
"cbtn"
class
=
"btn btn-danger"
ng-click
=
"cancel()"
>
<
span
class
=
"glyphicon glyphicon-cancel"
>
</
span
>
Cancel
</
button
>
undefined
</
div
>
JS File
$scope.SaveData =
function
()
{
strErrorMsg =
""
;
var
a = $(
"#hid"
).val();
notEmpty(document.getElementById(
'fname'
),
'-Enter your First Name.'
);
notEmpty(document.getElementById(
'lname'
),
'-Enter your Last Name.'
);
notEmpty(document.getElementById(
'phone'
),
'-Enter your Phone Number.'
);
ValidMno(document.getElementById(
'phone'
),
'-Enter Valid Phone Number.'
);
if
(strErrorMsg ==
''
)
{
$.ajax({
type:
"POST"
,
url:
"User_Form.aspx/Data_Save"
,
contentType:
"application/json; charset=utf-8"
,
data: JSON.stringify({
id: $scope.id,
firstName: $scope.fName,
lastName: $scope.lName,
phone: $scope.phone,
photo: $scope.hid = a
}),
success:
function
(data) {
$scope.LoadData();
$(
"#hide"
).text(
''
);
$scope.$apply();
}
});
$scope.edit3 =
true
;
$scope.edit2 =
false
;
}
if
(strErrorMsg !=
''
)
{
$window.alert(
' \n'
+ strErrorMsg);
}
else
{
}
};
function
notEmpty(elem, helperMsg)
{
if
(elem.value ==
""
)
{
strErrorMsg = strErrorMsg + helperMsg +
"\n"
;
}
}
function
ValidMno(elem, helperMsg)
{
if
(elem.value !==
""
)
{
var
phone = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if
(!(elem.value.match(phone)))
{
strErrorMsg = strErrorMsg +
''
+ helperMsg +
"\n"
;
}
}
}
required validation in javascript angularjs
Vlaidation in AngularJS
Up Next
Required Validation in JavaScript AngularJS