In MVC3, there are a way to add or stop validation in a field depending on the value of a drop-drown list with JQuery? I have been trying with Fluent Validation, but with no luck.
Are you using unobtrusive validation? Is so, look at the html and you will see that there are some html5 attributes on your input, something like this:
<input name="product" id="product" data-val="true" data-val-required="Product is required" />
I suppose you could use jQuery to remove the data-val attribute and then the jQuery Validator will skip this item.
$("#product").data("val", false);
Well, that's my guess, try it yourself.
you should use jQuery AddClass Rules
Create jQuery Class
$.validator.addClassRules({
Req: {
required: true
}
});
Validate the Filed by checking the selected value
$("#Selector").blur(function () {
var Val= $("#Selector").val();
if (Val == "Compare to the String") {
$("#Selector").addClass("Req");
}
else {
$("#Selector").removeClass("Req");
}
});
Related
I am using Model validation and k-state-error css class is not being applied to it in case validation fails. what else i can do to add this class to my datepicker
function onChange(e) {
if (e.date == undefined) {
var item = $(this).find('.k-picker-wrap');
$(item).addClass("k-state-error");
// $(e).css("border-color", "red");
}
}
using this code to add class but it's not working. Perhaps jquery selector is not right
From your code seems that you are trying to implement a validation that checks that the date is required. Why not implementing it as:
HTML:
<input id="date" required/>
JavaScript:
$("#date")
.kendoDatePicker({})
.kendoValidator({
validateOnBlur: true,
messages : {
required : "My custom required message"
}
});
I'm trying to implement a custom client side validation, but it is not working. I'm basing myself on the article on Codeproject http://www.codeproject.com/Articles/275056/Custom-Client-Side-Validation-in-ASP-NET-MVC3
I also looked here on SO, but I think I'm implementing it in the correct manner, but I'm overlooking something.
My goal is to validate a date (required, date format and not earlier than another date on the form). The first two can be done with data annotations, the last I have to do with custom validation.
I have on my base class some dataannotations (ClassLibrary is in VB.NET):
Imports System.ComponentModel
Imports System.ComponentModel.DataAnnotations
<MetadataType(GetType(CM_CONTRACTVALIDATIONData))>
Partial Public Class CM_CONTRACTACTIVATION
'...
End Class
Public Class CM_CONTRACTVALIDATIONdata
'...
<DataType(DataType.Date)>
<Required()>
Public Property TakeBackDeviceWhen
'..
End Class
In the javascript file I have added the custom method:
//validation
$.validator.addMethod("checkPickupDate", function (value, element) {
return false;
});
$("#form").validate({
rules: {
TakeBackDeviceWhen: {
checkPickupDate: true
}
},
messages: {
TakeBackDeviceWhen: {
checkPickupDate: "Test"
}
}
}
);
My chtml file is as follow:
#Html.TextBox("TakeBackDeviceWhen", Model.TakeBackDeviceWhen.HasValue ? Model.TakeBackDeviceWhen.Value.ToShortDateString() : "", new { style = "Width: 200px" })
The resulting HTML is as follow:
<input id="TakeBackDeviceWhen" class="hasDatepicker" type="text" value="" style="Width: 200px" name="TakeBackDeviceWhen" data-val-required="The TakeBackDeviceWhen field is required." data-val="true">
It seems that neither my type validation and my custom validation isn't implemented.
What is going wrong?
OK, solved it. I hope :-)
What did I learned today:
(1) Don't use EditorFor: when you scaffold it from a MVC template, input fields are generated to EditorFor, it seems that you can't add custom unobtrusive validation tags. So, I was trying to get this fixed, untill I changed it to TextBoxFor.
(2) You can add custom validation methods in jQuery, but you can't mix them with unobtrusive validation. After adding a custom method, you have to also add it to the unobtrusive adapters. And don't forget to add jQuery on the bottom :-s (I got this from jQuery.validator.unobtrusive.adapters.addMinMax round trips, doesn't work in MVC3)
$(function () {
$.validator.addMethod("checkpickupdate", function (value, element) {
if (value == "20/09/2012") {
return false;
} else {
return true;
}
});
$.validator.unobtrusive.adapters.addBool("checkpickupdate");
} (jQuery));
(3) Add validation tags to the input field in the htmlAttributes:
#Html.TextBox("TakeBackDeviceWhen", Model.TakeBackDeviceWhen.HasValue ? Model.TakeBackDeviceWhen.Value.ToShortDateString() : "",
new {
style = "Width: 200px",
data_val = "true",
data_val_required = "verplicht!",
data_val_date = "moet datum zijn",
data_val_checkpickupdate = "wow"
})
(4) Datatype data annotations will not enforce a validation. You have to add it like in (3). You can add a custom ValidationAttribute like (for server side validation):
public class MustBeDateAttribute : ValidationAttribute {
public override bool IsValid(object value) {
try
{
DateTime dte = DateTime.Parse(value.ToString());
return true;
}
catch (Exception)
{
return false;
throw;
}
}
}
And this is the resulting html output:
<input type="text" value="" style="Width: 200px" name="TakeBackDeviceWhen" id="TakeBackDeviceWhen" data-val-required="required!" data-val-date="has to be a date" data-val-checkpickupdate="custom error" data-val="true" class="hasDatepicker valid">
As I'm using my ClassLibrary in different projects, I'm now going to try to seperate the dataannotations meta data from the class library (maybe with dependency resolver).
I have an application in ASP.NET MVC 3 using Razor. I have setup some data annotations on text boxes along with jQuery validation and unobtrusive validation.
The thing is, some fields have custom validation logic using plain old vanilla JavaScript like the following functions.
function Validation() {
var signUp = SignUpValidation();
var book = BookingValidation();
if (signUp && book) {
return true;
}
else
{
ShowErrorMessage();
return false;
}
}
function ShowErrorMessage()
{
$('span#ErrorMessage').html('These fields are required');
}
where SignUpValidation(), BookingValidation() are functions which
returns either true or false on basis of some other validation
logic.
This is my code for submit button.
#using (Html.BeginForm(MVC.Booking.Actions.AtWork(model: null), FormMethod.Post,
new {#onsubmit = "return Validation()" }))
{
#Html.Partial("_BookingView")
}
This approach is working in all browsers except IE-7/8.
I faced the same issue lately .. and worked out the following solution:
instead of giving your additional form validation (apart from the unobtrusive mvc 3 validation) as a separate/second submit handler in form "onsubmit" event, you should "inject" your additional validation function in the main unobtrusive validation process of mvc3.. let it take care of the rest.
Create a custom validation adaptor somewhere in your common javascript code/file:
(function ($) {
if($.validator && $.validator.unobtrusive) {
$.validator.unobtrusive.adapters.addBool("AdditionalFormValidation");
}
} (jQuery));
In your view file, where you have the form, add this code to create a new jquery validator method for the custom validator adaptor that you defined in your common file above:
(function ($) {
if ($.validator) {
$.validator.addMethod("AdditionalFormValidation", function (value, element) {
return Validation();
});
}
} (jQuery));
Here
- "AdditionalFormValidation" is the validator method name same as your custom validation adaptor.
- "Validation" is the name of your javascript function that takes care of your additional validation and returns a boolean result for validation successs or failure.
In your form, remove the "onsubmit" handler that you had supplied, add a invisible dummy text field to your form and apply the custom unobtrusive validation adaptor/rule that you created, as given below:
#using (Html.BeginForm(MVC.Booking.Actions.AtWork(model: null), FormMethod.Post))
{
#Html.Partial(MVC.Booking.Views._BookForAtWork)
<input type="text" style="visibility:hidden; width: 1px; height: 1px;" name="hiddenValidation" id="hiddenValidation" data-val="true" data-val-AdditionalFormValidation />
}
This solution worked like a charm for me. To me appears a cleaner solution as it injects the additional validation in the same unobtrusive validation flow of mvc3 rather than creating a second validation flow. Also it is inline to future improvement for creating custom data annotation (validations) for all the custom client side validation work.
You may try updating both your jQuery.Validate.min.js and jquery.validate.unobtrusive.min.js files to latest version...it could be that these files are old...I had the same issue some time back and fixed it by doing this update.
Using Asp.Net MVC3 with unobtrusive validation. I have a form that has a few input fields. One of the fields is pretty simple:
<input id="Name" class="valid" type="text" value="" name="Name" data-val-required="Enter your name." data-val-length-min="5" data-val-length-max="50" data-val-length="Enter a valid name." data-val="true">
I then have some js that validates the form and submits it only if client-side validation passes as in:
var $form = $('#contact_form');
var formAction = $form.attr('action');
var serialized = $form.serialize();
if ($form.validate().valid()) {...
Now the last line always returns true (yes I have unobtrusive enabled). However if I change the last line to:
if ($form.validate().element('#Name')) { ...
It works great and returns false. I have many fields and don't want to iterate over each one and am confused as to why when validating the whole form it says true but validating each individual element returns false correctly.
Things I tried:
- reparsing the the form via unobtrusive's $.validator.parse(... to no avail. It's not a dynamic form and gets rendered when the page loads.
Note: I also checked that jquery (v1.6.2) jquery.validate.min.js (v1.8.1) and jquery.validate.unobtrusive.min.js are loaded in the browser.
You don't have to call .validate() but directly .valid():
if ($form.valid()) {
...
}
I have an controller which has check like that
if (form["submit"].ToString() == "Continue")
{
}
and i have button which is doing submit
<button name="submit" value="Continue">Continue</button>
It was all working well until i decided to disable Continue button on submit to prevent double click using this function:
$('form').submit(function () {
if ($(this).valid()) {
$(':submit', this).attr('disabled', 'disabled');
}
});
So now i don't get value form["submit"] posted on controller.
Any thoughts how may i fix that?
I want still prevent second click but be able to get form["submit"] value posted on controller.
Can you control the submit value in a hidden field in the form? I can't tell what other logic you might need, but when the form renders, you could set the hidden field's value to the submit button's value and change it when necessary using the first script below. As long as it has a name attribute and is enabled (which you'd rarely disable a hidden field) then it will post when the form is submitted.
$(function() {
// this assumes your button has id="myButton" attribute
$(':hidden[name="submit"]').val($('#myButton').val());
});
And of course in your form, you would need a hidden field with name="submit"
<input type="hidden" name="submit" value="Continue" />
Then, whenever the state of your form changes, modify the disabled state of the button and the value of the hidden field to reflect the value (if it changed at all).
There are also frameworks you may find useful for UI features like this. KnockoutJS comes to mind. It can be used to "value" bind input elements. It's probably overkill for this small example, but it could be useful if your UI expands. I've added markup, script and comments below if you're interested.
$(function () {
var viewModel = {
submitValue: ko.observable("Continue")
};
ko.applyBindings(viewModel);
$('form').submit(function() {
if($(this).valid()) {
// the following line will change the both the hidden field's value
// as well as the button's value attribute
viewModel.submitValue("some other value");
// I couldn't follow your selector here, but please note I changed
// the name of the submit button in the markup below.
$(':submit, this).attr('disabled', 'disabled');
}
});
});
KnockoutJS requires you use the data-bind attribute to setup your elements. In your case, you'd bind one property to multiple elements like this:
<button name="submitButton" data-bind="value: submitValue"/>Continue</button>
<!-- and bind the same value similarly in the hidden field-->
<input type="hidden" name="submit" data-bind="value: submitValue"/>