How to validate textbox in ASP.NET MVC using bootstrap error?

Question

0.00/5 (No votes)

See more:

Hi Team

I am struggling to validate my textbox on my form, im using asp.net mvc. I will share below my logic on view side, must i have to do something on javascript layer within a view itself? Please help me to improve this logic better for user understanding when submitting a form. My message i want to display " Field is required" especially if its to be leave without supplying any information.

What I have tried:

<div class="row">
                    <label for="Attendee Cell Number">Cell Number:</label>
                    <div class="input-group col-md-3 col-md-offset-1 col-sm-1 col-xs-1">
                        <div class="input-group pull-right">
                               
                            @Html.TextBoxFor(m => m.Cell_Number, new { @class = "form-control", type = "text", id = "cell number", autofocus = "autofocus", required = "required" })

                            <div class="input-group-append">
                                <div class="input-group-text">

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

<div class="input-group mb-2">
                         <div class="input-group-append">

                         </div>
                         <div class="input-group col-md-4 col-md-offset-2 col-sm-2 col-xs-2">
                             <div class="input-group pull-right">
                                                             
                                 @Html.TextBoxFor(m => m.Code, new
                                 {
                                     @class = "form-control",
                                     type = "text",
                                id = "postal code",
                                     autofocus = "autofocus",
                                     placeholder = "Postal / Zip Code",
                                required = "required",
                                pattern = @"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$",
                               title = "This field is required"
                                 })

                                 <div class="input-group-append">
                                     <div class="input-group-text">

                                     </div>
                                 </div>

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

Posted 17-Mar-20 22:15pm

gcogco10

Updated 18-Mar-20 9:06am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2020-03-18T09:07:00

Solution 1

Add your validation rules to the model, and make sure you include the jQuery validation scripts in your page.
Adding Validation | Microsoft Docs[^]

C#

[Required]
public string Cell_Number { get; set; }

[Required]
[RegularExpression(@"^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$")]
[Display(Name = "Postal / Zip Code")]
public string Code { get; set; }

NB: In both cases, you're trying to set the ID to a value with a space in it. Don't do that:

id - HTML: Hypertext Markup Language | MDN[^]:
id's value must not contain whitespace (spaces, tabs etc.).

Posted 18-Mar-20 9:07am

Richard Deeming

Comments

gcogco10 19-Mar-20 2:44am

Hi Richard, i have made the changes as per this solution and i removed my id, amended as per this logic. Still no validation, anything i could be missing? Please advice

Richard Deeming 19-Mar-20 7:53am

Did you add the jQuery validation scripts, and are they loading correctly?

You might also need to add an appSetting in web.config to enable unobtrusive validation:

<addSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

NB: When the form is submitted, you'll also want to check ModelState.IsValid to check the validation rules on the server. If it returns false, you'll need to re-display the view.

gcogco10 19-Mar-20 8:14am

Richard I do have this configured as well, still nothing is working. Im trying to redo it from using one specific texbox to see if this could work.

Richard Deeming 19-Mar-20 8:15am

Check the rendered source of your page, to make sure it includes the validation attributes on the inputs.

Also check the browser's developer tools console for any errors.

gcogco10 19-Mar-20 8:23am

// Route for Dashboard.
routes.MapRoute(
name: "Dashboard",
url: "dashboard/",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
); Nothing is as a error on developer tool I have checked