How to validate texbox using asp.net bootstrap error?

Hi Team

I am having a form with textbox and dont know how to validate the textbox, the validation has to happens when user leaves the form with empty field inserted. Message " This field is required". Here is my logic but its not validating and need some help.

class="row">
for"Email">Email:
class="input-group col-md-4 col-md-offset-2 col-sm-2 col-xs-2">
class="input-group pull-right">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", type = "text", id = "email", autofocus = "autofocus", placeholder = "[email protected]", required = "required" })
class="input-group-append">
class="input-group-text">

Hey, for this you have to implement textbox blur event validation using jquery.

Check the below code

>
<html lang="en">
<head>
<title>testtitle>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>
head>
<body>
<div class="wrapper">
<div class="content-wrapper">
<section class="content">
<div class="container-fluid">
<div class="col-md-6">
<div class="card card-primary">
<div class="form-group">
<input type="email" class="form-control" id="textEmail" placeholder="Enter Email" required="required">
<div>
<label id="labelMessage" class="text-danger" style="display:none">Invalid email address.label>
div>
div>
div>
div>
div>
section>
div>
div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">script>
<script type='text/javascript'>
$(function () {
//When the blur event occurs from your Textbox (you lose focus)
$('#textEmail').blur(function () {
var email = document.getElementById("textEmail").value;
var expr = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
if (!expr.test(email)) {
document.getElementById("labelMessage").style.display = "inline";
}
else {
document.getElementById("labelMessage").style.display = "none";
}
});
});
script>
body>
html>

Ok this is newest logic, but still unable to get error validation on UI side. What could be an issue. reason being i am textbox its a textbox not EditorBoxFor. See this logic as per following the article you sent.

DataType(DataType.PhoneNumber)]
[Required(ErrorMessage = "This field is required")]
public string Cell_Number { get; set; }
div class="row">
for="Attendee Cell Number">Cell Number:
class="input-group col-md-3 col-md-offset-1 col-sm-1 col-xs-1">
class="input-group pull-right">
@Html.TextBoxFor(m => m.Cell_Number, new { @class = "form-control", type = "text", id = "cell number", autofocus = "autofocus", required = "required" })
@Html.ValidationMessageFor(m=>m.Cell_Number, " ", new {@class = "text-danger"})
class="input-group-append">
class="input-group-text">

Hi,

Try to validate at server side with Data Annotation

Eg:

public class Student
{
[Required(ErrorMessage = "Please enter name"), MaxLength(30)]
public string StudentName
[Required(ErrorMessage = "Please enter marks")]
public int Marks { get; set; }
[Required(ErrorMessage = "Please enter Email ID")]
public string Email { get; set; }
}

Just provide the attributes like [Required] [Minlength] [MaxLength] on your properties and apply in view use the @Html.ValidationMessageFor() method. For more follow the URL link provided.

Please read the below link article for getting knowledge on Data annotations.Then easily you can crack the thing you want.

https://www.c-sharpcorner.com/article/model-validation-using-data-annotations-in-asp-net-mvc/

Mark as accepted answer. If it helps.

Thank you.

Hi Reddy

Any example how to do this will help me a lot please mate, thanks.

use data annotation concept in MVC.

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Amit Mohanty6y ago
Accepted answer
Hey, for this you have to implement textbox blur event validation using jquery.
Check the below code
>
<html lang="en">
<head>
    <title>testtitle>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>
head>
<body>
    <div class="wrapper">
        <div class="content-wrapper">
            <section class="content">
                <div class="container-fluid">
                    <div class="col-md-6">
                        <div class="card card-primary">
                            <div class="form-group">
                                <input type="email" class="form-control" id="textEmail" placeholder="Enter Email" required="required">
                                <div>
                                    <label id="labelMessage" class="text-danger" style="display:none">Invalid email address.label>
                                div>
                            div>
                        div>
                    div>
                div>
            section>
        div>
    div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">script>
    <script type='text/javascript'>
        $(function () {
            //When the blur event occurs from your Textbox (you lose focus)
            $('#textEmail').blur(function () {
                var email = document.getElementById("textEmail").value;
                var expr = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
                if (!expr.test(email)) {
                    document.getElementById("labelMessage").style.display = "inline";
                }
                else {
                    document.getElementById("labelMessage").style.display = "none";
                }
            });
        });
    script>
body>
html>
0
Guest User6y ago
Ok this is newest logic, but still unable to get error validation on UI side. What could be an issue. reason being i am textbox its a textbox not EditorBoxFor. See this logic as per following the article you sent.
DataType(DataType.PhoneNumber)]
   [Required(ErrorMessage = "This field is required")]
   public string Cell_Number { get; set; }

div class="row">
                   for="Attendee Cell Number">Cell Number:
                   class="input-group col-md-3 col-md-offset-1 col-sm-1 col-xs-1">
                       class="input-group pull-right">

                           @Html.TextBoxFor(m => m.Cell_Number, new { @class = "form-control", type = "text", id = "cell number", autofocus = "autofocus", required = "required" })
                           @Html.ValidationMessageFor(m=>m.Cell_Number, " ", new {@class = "text-danger"})
                           class="input-group-append">
                               class="input-group-text">

Vishvjit Shinde6y ago
Hi,
Try to validate at server side with Data Annotation

Eg:
public class Student
{
[Required(ErrorMessage = "Please enter name"), MaxLength(30)]
public string StudentName
[Required(ErrorMessage = "Please enter marks")]
public int Marks { get; set; }
[Required(ErrorMessage = "Please enter Email ID")]
public string Email { get; set; }
}
0
Sreekanth Reddy6y ago
Just provide the attributes like [Required] [Minlength] [MaxLength] on your properties and apply in view use the @Html.ValidationMessageFor() method. For more follow the URL link provided.

Please read the below link article for getting knowledge on Data annotations.Then easily you can crack the thing you want.

https://www.c-sharpcorner.com/article/model-validation-using-data-annotations-in-asp-net-mvc/

Mark as accepted answer. If it helps.
Thank you.
0
Guest User6y ago
Hi Reddy

Any example how to do this will help me a lot please mate, thanks.
0
Sreekanth Reddy6y ago
use data annotation concept in MVC.
0