I have a passwordfor with a required field validation. placeholder attribute doesnt work in IE and instead, validation is fired for the watermark text which is displayed as special characters.
I came across lot of suggestions like here
Placeholders in IE and
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html that work for all textboxes except for password.Any help is highly appreciated.
I've seen the same behavior. Extremely frustrating stuff. I tried overriding the default template by adding a ~/Views/Shared/EditorTemplates/Password.cshtml template that looked like this:
#Html.Password("",
ViewData.TemplateInfo.FormattedModelValue,
new {
#class = "text-box single-line password",
placeholder = ViewData.ModelMetadata.Watermark})
The above worked when I did it for a String type (~/Views/Shared/EditorTemplates/Password.cshtml) but not for password. So I downloaded the source for MVC4 and took a look. The only thing I could see that would make the password field behave in a manner different from the input (TextBoxFor) field is that the format data is passed as a null into the underlying HTML generation code (see System.Web.Mvc.Html.InputExtensions, line 233, PasswordHelper function). But that's just a guess. I could never get the unit tests running to verify that assumption.
Until I find a solution, my workaround was to change my Razor code from this:
#Html.PasswordFor(model => model.Password)
To this:
#Html.PasswordFor(model => model.Password, new { placeholder = "Password" })
That made the desired watermark appear for me. It's a kludge but what do you do?
Josh - You are on the right track.
Instead of
#Html.PasswordFor(model => model.Password)
Use
#Html.EditorFor(model => model.Password)
Related
I have a problem here which i am working quite a while but do not have any ideas left for a solution. I will try to make it short:
I use the eColumns extension for the admin and the view module in yii. I added a combobox to select views which are saved in the database so that users can build their own selection of select columns for each table, however:
In eColumns i added a button to delete an already created selection and an input field to give the selection a name
CHtml::button('', array('type' => 'submit','name' => 'btn_delete','value' => 'Ansicht löschen', 'onclick' => '$("#'.$this->getId().'").dialog("close");', 'style' => 'align: left', 'confirm'=>'Sind sie sicher das sie diese Ansicht löschen möchten?'));
CHtml::textField('input_name', substr($this->selectedView,strpos($this->selectedView,"##")+2), array('size'=>30,'maxlength'=>200));
If i click the button in the view-module everything works as expected. $_POST is filled with "input_name" and "btn_delete". However if i this same code included in the admin-module only input_name is filled - btn_delete is simply not set if i click the button.
Anybody can i give me any hint what i can check?
Thanks in advance! :)
If you are using jQuery serialize() to collect form elements in your admin-module, jQuery serialize() will not serialize any submit button value.
See also serialize example, hope this will help. :)
=== links to jsfiddle must be accompanied by code.. ===
html
<form>
<input type="text" name="text" value="text-value">
<input type="submit" name="submit-btn" value="button-value">
</form>
<span name="result-serialize"></span>
jQuery
var serializeString = $("form").serialize();
$("span[name=result-serialize]").text(serializeString);
I'm using yiibooster and it is really good extension for the frontend, my issues now is that I want to remove the red * that is rendered in the required fields but maintaining the required validator in the model, anyone knows how to do this????
thankss
This is an example of a label generated by a required field validator:
<label for="User_email" class="required">
Email Address <span class="required">*</span>
</label>
Therefore, you can hide it by adding this class to your site's CSS:
span.required {
display: none;
}
If you want to achieve what you want easily, I suggest you to do like below, which is simplest way(in my view point):
Just try to find * selector(the ID or CLASS) name.(using a firebug or any inspector)
Then just do like below in your document.ready():
$(SELECTOR).remove();
NOTES
THE * MIGHT BE CREATED DYNAMICALLY
THIS IS JUST AN SUGGESTION, YOU CAN FIND ANY OTHER POSSIBLE WAYS SUCH AS CHANGING THE CSS CLASS IN ORDER TO DO DISPLAY:NONE OR SOURCE MODIFICATION
<?php echo $form->textFieldGroup($model, 'username',array('label'=>Yii::t('model','Username'))); ?>
or edit line 1223 of TbActiveForm.php from
echo $this->labelEx($model, $attribute, $options['labelOptions']);
to
echo $this->label($model, $attribute, $options['labelOptions']);
Red * is adding according to your validators definition in your model. you have two options.
First in your model add On => 'scenario name' for required validator for the property you want. so you can control the behavior of yii-booster components because they only apply those rules which matches the scenario of the model. for example:
array('password_repeat', 'required', 'on'=>'register'),
It will show Red * only in register scenario (if you set it via $model->setScenario('register');) and in normal times no red * will shown.
Another option for you is when you are creating the form element based on the property marked required by validator rules in model, you can prevent that * from showing but this way will not ignore that validation rule and if you try to submit the form while this form field is empty you will get error from yii (because you just solve showing but in background you have your required validator). for this method, you only need to provide label in your yii-booster form element:
<?php echo $form->textFieldGroup($model,'textField',
array(
'wrapperHtmlOptions' => array(
'class' => 'col-sm-5',
),
'hint' => 'In addition to freeform text, any HTML5 text-based input appears like so.',
>>>>> 'label' => 'Your new value for label which will have no red *',
)
); ?>
From reading the posts in this thread - and being unable to post the question there for some bizarre reason :( I will ask it here in hope of getting a solution
Am I write in saying that I have to do validation like below..
I add the html5 attribute (data-required-msg/validationMessage) to the textbox and the required attribute as well..
I make a span for the invalid msg and tie it to the field with the "data-for" attribute. The message "Please enter name" should appear in this span then.
Questions
Is this the only way to work with this?
Is there no way for me to display the proper error message ("Error Message I want to show"), as in any way to tie to the mvc attributes on the ViewModel. As another poster said this is a lot more scalable/re-usable and better design.
Using a data-for="Name" is very brittle as a change in the Model field name will not reflect there and that could be forgotten about hence delivering buggy software. You are losing the type safety of something like
#Html.ValidationMessageFor(m=> m.Name)
Code
public class AViewModel
{
[Required(ErrorMessage="Error Message I want to show")]
public string Name { get; set; }
}
<div class="validation-wrapper">
<div class="input-wrapper">
#Html.TextBoxFor(m => m.Name, new { placeholder = "eg. John Smith", data_required_msg="PleaseEnter name", required="required" } )
</div>
<span class="k-invalid-msg" data-for="Name"></span>
</div>
Cheers,
J
In order to be able to do what you are saying, you need to be using Kendo UI for ASP.NET MVC. With that you can continue using your DataAnnotations attributes and Html.ValidationMessageFor() helpers as before. All you will need to do is call $('[your_form_selector]').kendoValidator() after your form (or on document.ready()).
I have an MVC 4 app and am using HTML.BeginForm to create a form on a View. I have several field sets where I have positioned them on an absolute basis. For example, here is my BeginForm and one of my fieldsets:
<div style="width:1100px; height:490px;">
#using (Html.BeginForm("Create", "BicycleSellerListing", FormMethod.Post, new { enctype = "multipart/form-data" })) {
#Html.ValidationSummary(true)
<fieldset style="position:absolute; top:180px; left:150px; width:550px">
<legend>Bicycle Information</legend>
...
...
The problem is that if there are errors in the ModelState when a submit is done, the errors generated are covered by some of the fields in the fieldsets. Is there a way I can indicate where I want model state errors to display?
There are couple ways to display errors. #Html.ValidationSummary() will display all of the errors in one place. So depending where you put #Html.ValidationSummary(true) - that's where errors will be displayed. For example, you can put it after the form, not in the beginning like you have it.
Another way is to use #Html.ValidationMessageFor(...) helper. It takes your mode's property name so the error will only be displayed for that property. Again, you can put it anywhere you want. Usually people put it next to the input so that error message is displayed next to the input as well.
Sorry but I am new to C# and ASP.NET and I saw alot of posts about this problem but I quite didn't get it. I am trying to understand how to pass a GET parameter to an action thru HTML.ActionLink:
here is the the URL:
http://localhost:36896/Movies/SearchIndex?searchString=the
and my CSHTML page should look like this:
<input type="Text" id="searchString" name="searchString" />
#Html.ActionLink("Search Existing", "SearchIndex", new { searchString = "the"})
this hard coded parameter "the" is actually working, but how can I select the input element with id=searchString, with something like document.getElementById("searchString").value
Thanks,
If the value you want to send as GET parameter is not known on the server you cannot use the Html.ActionLink helper to add it. You need to use javascript to manipulate the existing link and append the parameter.
It looks like you have an input field that contains a search string and you want to send the value entered in this field to the server. A better way to handle this scenario is to use an HTML form with method="GET" instead of an ActionLink. This way you don't need to use any javascript - it's part of the HTML specification:
#using (Html.BeginForm("SearchIndex", "Movies", FormMethod.Get))
{
#Html.EditorFor(x => x.SearchString)
<button type="submit">Search</button>
}
Now when you click on the Search button the value entered in the SearchString field will automatically be sent to the SearchIndex action:
http://localhost:36896/Movies/SearchIndex?searchString=the
But if you absolutely insist on using an ActionLink you will have to write javascript to manipulate the href of the existing link when this link is clicked in order to append the value to the url. It's an approach I wouldn't recommend though because the HTML specification already provides you this functionality throughout HTML forms.
This makes the #Html.EditorFor refer to the Title field of the object, kinda in a random way but it works!
#using (Html.BeginForm ("SearchIndex", "Movies", FormMethod.Get))
{
#Html.EditorFor( x => x.ElementAt(0).Title)
<button type="submit">Search</button>
}
Still couldn't pass input parameter to the URL in the GET.
EDIT:
FINAL SOLUTION:
#Html.TextBox("SearchString")
<button type="submit">Filter</button>
and on the controller side, switch the input parameter. Basically it will automatically recognize the passed parameter.
public ActionResult SearchIndex(string searchString)
{
...
}