I use Kendo validator in my MVC application and want to change the position of validation message from below to right of the input. Although the html code of Kendo UI validation appears right of the input, the same code shows validation message below the input instead of right of it. Is there any mistake or how to convert it to razor? Please note that there is no space between "required" and "validationmessage" in razor code, but when using it as html code an error encountered. Any idea?
You might have a look at: http://jsbin.com/kubohuniki/1/edit?html,output
This line shows validation message on "right" of the input:
<label>Label RIGHT</label>
<input id="Name" class="k-textbox" required validationmessage="required field" />
This line shows validation message on "below" of the input:
<label>Label BELOW</label>
#Html.Kendo().TextBoxFor(m => m.Name, new { #class="k-textbox", requiredvalidationmessage="required field" })
try this (updated)
#Html.TextBoxFor(m => m.Question, new { #class = "k-textbox",
required = "true", validationmessage = "required field" })
#Html.ValidationMessageFor(model => model.Question)
Related
I'm wanting to create a login page using the Telerik Kendo UI Textboxes so I will need my password input masked. Does anyone have any suggestions? I've tried:
.TextBoxFor(m => m.Password)
.HtmlAttributes(new { type = "password" })
below is my code as pretty much standard it is:
#(Html.Kendo().TextBox()
.Name("password")
.Placeholder("Password")
.Label(label => label
.Content("Password")
.Floating(true)
)
.HtmlAttributes(new { style = "width: 100%;border-radius: 7px;border-color: #ff4d41;" })
)
Getting to the stage I'd be faster just creating my own textboxes lol
as per my understanding based on your question
you need to add type="password" in kendo UI control.
Like below code
#(Html.Kendo().TextBox()
.Name("password")
.Placeholder("Password")
.Label(label => label
.Content("Password")
.Floating(true)
)
.HtmlAttributes(new {type="password", style = "width: 100%;border-radius: 7px;border-color: #ff4d41;" })
)
Output
As we know Password HTML helper available in MVC.
#Html.Password()
#Html.PasswordFor()
When I look at an older MVC project, the following code would render a textbox with the propriate styling:
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
But now that JQueryUI is being used instead of Bootstrap, I had to manually add Bootstrap again and added the same line to my code, but the class won't render.
The only way to make it work it seems is using the:
#Html.TextBoxFor(model => model.License, new { #class = "form-control" })
HTML helper.
Is there a big difference between EditorFor and TextBoxFor and if it is important to use EditorFor instead of TextBoxFor, how could I add the Bootstrap class form-control to the rendered input by the EditorFor HTML helper? And what is causing this situation that the class won't be rendered on the input element with the HTML helper?
TextBoxFor: Is always render like an input textbox irrespective datatype of the property which is getting bind with the control. It creates a text input like this : <input type="text" />
EditorFor: It renders HTML markup based on the datatype of the property.
Both will be generate the same markup.
You can also see explanations in this post: https://stackoverflow.com/a/4826185/3401842
I am trying not to generate autocomplete in browser for that I am trying this
#Html.TextBoxFor(
model => model.UserName,
new { #class = "form-control", autocomplete = "off" })
#Html.ValidationMessageFor(m => m.UserName, "", new { #class = "text-danger" })
which generate HTML like this
<input type="text" value="" name="UserName" id="UserName" data-val-required="User name is required." data-val="true" class="form-control" autocomplete="off">
In other views I have use the same and it is working fine. but in login view autocomplete="off" not working. for doing so I have clear model state like this in controller
ModelState.Remove("UserName");
reference taken from the following sites
How to Turn Off Form Autocompletion
Disable autocomplete on html helper textbox in MVC
How to disable autocomplete in MVC Html Helper
Remove browser autocompletion in MVC
I still wonder what is wrong in my code? Your suggestion means a lot to me.
As per Bharat's answer it actually, the issue is not of the autocomplete,
the issue comes from the browser's saved logins.
but we can overcome this without going to clear saved passwords of the browser.
As per my intention, all browsers doing similar duties that the field before the password is assumed as Username and it uses the last logged in data will be pasted automatically even if we do autocomplete="off".
The solution is to make the password's field autocomplete="new-password", but this will work only in HTML5 or above supported browsers only...
The issue comes from the browser's saved logins.
When these issue arise at my side, i removed saved logins from my browser and it solved my issue.
visit https://support.mozilla.org/en-US/questions/962690
https://support.google.com/chrome/answer/95582?hl=en
It is Working in MVC 5, to auto-complete off
#Html.TextBoxFor(model => model.UserName,
new { #placeholder = "UserName", #id = "txtUserName", #autocomplete = "new-user" })
#Html.PasswordFor(model => model.Password,
new {#placeholder = "Password", #id = "txtPassword", #autocomplete = "new-password" })
I am working in an asp.net mvc project and I would like my validation to appear inside of the textbox that it is pertinent to. Currently my code looks like this:
<div class="subStandardOption">
#Html.ValidationMessageFor(model => model.PdsToCreate.Standards.AudioFrequency)
#Html.TextBoxFor(model => model.PdsToCreate.Standards.AudioFrequency)
</div>
The validation only appears the user clicks the checkbox to the left of the text field then tries to submit the form and leaves the textbox is empty, so overwriting the current value is not a concern. When the checkbox is not checked, the textbox is disabled and no validation is necessary.
You can use an HTML5 placeholder to show the required format:
#Html.TextBoxFor(model => model.PdsToCreate.Standards.AudioFrequency, new { placeholder = "e.g. 20 Hz" })
Asp.net Mvc3 ads some custom attributes like "data-val-required" on input elements to perform validation. I know all theory behind this, how it works.
What i want to know is :
When I create my form inside " #using (Html.BeginForm())" it produces custom attributes, but it doesn't create those attributes when i place my form between plain "<form>" tag.
below is a demo i have created to demonstrate what iam saying
Razor Code, form inside BefingForm()
#using (Html.BeginForm()) {
#Html.EditorFor(model => model.EmailAddress)
#Html.ValidationMessageFor(model => model.EmailAddress)
}
generated Html contains "data-val-required" as attribute shown below
<input type="text" value="" data-val-required="The Email Address field is required." data-val-email="my message">
Razor Code Form inside pure Html Tag
<form action="/Account/Register" method="post">
#Html.EditorFor(model => model.EmailAddress)
#Html.ValidationMessageFor(model => model.EmailAddress)
</form>
generated Html doesnt contain "data-val-required" attribute shown below
<input type="text" value="" gtbfieldid="44">
My question is how can i ask MVC to add those attributes even form is placed in side pure html tags
I believe BeginForm method internally assigns a formcontext object to viewCotnext's property FormContext. If you do not want to use plain html form tags you have to do it manually like
<%
this.ViewContext.FormContext = new FormContext();
%>
and in razor it would probably be
#{
this.ViewContext.FormContext = new FormContext();
}
Problem here is that internally Html.BeginForm is flagged by Html.EnableClientValidation() to create FormContext that will store client-side validation metadata. Now, any HTML helper method that renders validation message also registers appropriate client-side validation metadata in FormContext. The result is what you get if you use helper. However, if you try to use HTML syntax and not helpers, the FormContext is never registered and therefore your validation is never added.
Regards,
Huske