Exploring the Integration of Metro CSS 3 Form Validation within the MVC Framework

I am looking to implement the form validator feature from Metro CSS 3 in my MVC 5 application.

Below is a snippet of my code:

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>@WebApplication.Resources.Account.AccountRegisterPageHeader</h4>
    <hr />
    @*@Html.ValidationSummary("", new { @class = "text-danger" })*@
    <div class="form-group">
        @Html.ValidationMessageFor(model => model.FirstName)
        @Html.LabelFor(m => m.FirstName, new {@class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.FirstName, new {@class = "form-control"})
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

The code snippet from Metro CSS for form input validation looks like this:

<div class="input-control text">
    <input
        data-validate-func="minlength"
        data-validate-arg="6"
        data-validate-hint="This field must contains min 6 symbols!"
        type="text">
    <span class="input-state-error mif-warning"></span>
    <span class="input-state-success mif-checkmark"></span>
</div>

I am curious how I can incorporate @Html.LabelFor, @Html.ValidationMessageFor() in this context.

Answer №1

<sect data-field="validate" data-mode="tip" data-timing="easeOutBounce">

            <div class="row cells2 ">
                <div class="cell">

                        <label class="block">Maximum length requirement (tip)</label>
                          <div class="input-control text">
                              @Html.TextBoxFor(model => model.Description,new {data_validator_func="maxlength",data_validator_arg="50", data_validator_tip="Max length 10 characters!" ,data_validator_tip_position="left"})
                              <span class="input-state-warning mif-alert"></span>
                              <span class="input-state-success mif-checkmark"></span>
                          </div>
                        <div>
                            <input type="submit"/>
                        </div>




                </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best approach to execute a javascript on an HTML page that is dynamically generated?

Working with jQuery Mobile, I have a situation where I am creating a listView of pages based on events stored in a database. Each event is parsed on my webpage to generate a unique HTML page for each one. Within each page, I include a distinct "subscribe" ...

Restrict certain sections of the website to authorized users only

In my game project, players are presented with two options: to play the game itself or to view global and local highscores. I have implemented a signup and login system where upon successful login, users can choose among playing the game, checking highscor ...

Using Python and Scrapy: Identifying whether a webpage is in HTML format or not

I'm working on a Scrapy spider that needs to determine whether a page it downloads is in html format or not. The website I want the spider to crawl contains links to both pdf and html files. If the spider encounters a pdf file, it should process the r ...

Turn off the ripple effect for this element

I am looking to turn off the ripple effect on an ion-chip component, which activates when clicked: <ion-chip> <ion-label>Hey</ion-label> </ion-chip> Is there a way to accomplish this? ...

ways to utilize inline styling in react using javascript

When repurposing an array of React components, I am looking to modify the inline styles generated with them. How can I access and log the inline styles of a React component? UPDATE: see the code snippet below: const pieces = this.props.pieces.map((decl, ...

Expanding Images for Optimal Display in Responsive Design

I have a collection of large images in various sizes that I need to display without any stretching inside a container with set height. The challenge is to make the image fit perfectly within the container without distorting its proportions. I must achieve ...

What could be causing the inability of Firefox4 to render the background color of the li element?

Is there a way to apply a background color to a forced inline element? I am having issues with displaying the background color in Firefox4, while it works fine in IE7. Can someone help me understand why this is happening and how to fix it? You can view th ...

The HTML output generated by JSF component libraries is subpar. Is this level of quality really acceptable?

Back when I worked on web-apps using jsp/jstl and jQuery, I made sure to keep my HTML clean and separate from styles and scripts. JSP would sometimes add unnecessary spaces and blank lines, but that was pretty much it. Now I'm giving jsf a try for de ...

Using Bootstrap's nav-pills inside a table

Is there a way to incorporate Bootstrap Nav Pills into a table, with the "tab buttons" located in the last row of the table? I've attempted it but it doesn't seem to be functioning correctly. Check out this link for reference <table clas ...

The variable is only recognized within the function and not outside of it

Seeking assistance as a newcomer in debugging and implementing code, I have been trying various approaches to pass a base64string into JotForms for generating images in PDF format. Below is the screenshot of the error encountered. View error here The foll ...

How to make a drop-down select list remain open even after selecting an option

In my current project, I have a dropdown box that holds a list of files which can be deleted. The user needs to select the file they want to delete from the dropdown each time and then the process repeats for every file. I would like to implement a feature ...

Shorten the text in a flex container using ellipsis and flex-grow

I have a "table" built using flex and I need to truncate the text in the first column if there isn't enough space, keeping it on a single line all the time. .parent { display: flex; border: 1px solid black; gap: 10px; } .first-column { bor ...

What is the best way to incorporate code into a page with numerous conflicting CSS styles, without resorting to Scoped CSS?

Struggling to incorporate tab code into a page with conflicting CSS? Even after attempts to edit classes and labels, the original code fights back against the new additions. While scoped CSS seems like the perfect fix, it's not widely supported yet. ...

Are conditional comments truly the best approach? What is their functionality and operation like?

A previous question addressing a div positioning issue in Internet Explorer received multiple suggestions advising the use of conditional commenting Why is this relatively positioned div displaying differently in IE? How does one implement conditional co ...

What is the process of calculating the difference between two time values in PHP?

I have searched everywhere online and tried multiple methods over the past couple of days, but still can't seem to achieve the desired result. My goal is to subtract two different times, for example 22:00:00 - 00:30:00 = 21:30:00 $hourToEatLastMeal = ...

Creating additional columns in a database table with PHP and SQL

        I'm currently working on a feature that enables me to add a new column to a database table using SQL and PHP. My setup includes a front-end form where users can choose the table they want to modify and input boxes for specifying the new c ...

The JQuery sidebar smoothly transitions in after the menu button is pressed

I have been attempting to utilize the animate function in JQuery to make a sidebar menu slide in from the left after clicking a menu button. Despite searching through various resources, such as Stack Overflow, I am still unable to get it to work properly ...

Develop a feature that is designed to reset the password in the user database, only to encounter a failure in the

Currently, I am working on a basic reset function. One of the files on the homepage is a simple html form structured as follows: <html> <body> <div> <form id="reset" action="login/reset.php" method="post"> <fieldset& ...

"The position of the Textbox shifts suddenly following the input of text

One interesting quirk I've noticed in my HTML code is that a text box with a jQuery button attached to it seems to shift down by about 4 pixels when the user enters text and then moves away from the box using the tab key or mouse. <div class=&apos ...

Styling an HTML table with two columns: one column displaying an image, and the other column containing information related to the image

I have a concept that involves creating a table with 2 columns. The left column will feature an image, while the right column will display data about the image in 6 rows. ________________________________ | |_______________| | | ...