I am trying to use a kendo numeric text box with angular validation (ng-required) however I'm not able to get it working. The ng-required attribute on this element has no effect on the form validation status.
From my understanding, the reason why this doesn't work is because kendo numeric text box uses k-ng-model to store it's value, whereas the angular validation works only with ng-model.
Has anyone else seen this issue, are there any workarounds?
I have found a workaround that involves using the kendo-numeric-text-box along with a hidden input field which makes use of ng-model.
<input data-kendo-numeric-text-box data-k-ng-model="numValue"/>
<input type="hidden" data-ng-model="numValue" data-ng-required="true" />
Related
I am using Spring MVC checkbox with materialize css and it is not showing up at all.
Here is what i am doing. i am using simple checkbox in jsp like this (without materializecss).
<form:checkbox path="nameID" value="store" id="nameid_3" />
Checkbox gets displayed correctly.Now when i embedded materializecss, checkbox does not appear on the screen.
So i went further to check what is really going on behind the wall and found this.
<input id="nameid_3" name="nameID" type="checkbox" value="store" checked="checked"><input type="hidden" name="_nameID" value="on">
Checkbox with hidden field and that's the problem.
When i deleted this hidden field in inspect element in chrome it worked.
So now questions how do i stop generating this hidden field with Spring MVC tag..? or is there alternate approach..?
and i am bound to use Spring MVC tag for validitions.
I found an alternate approach to remove these hidden fields. As we can see, there is a linking between name of checkbox and its hidden element. As we can see these field names are differentiated only using underscore. So we can remove these hidden fields using jQuery like this.
$('input[type=checkbox]').each(function() {
var name = $(this).attr('name');
$('[name="' + '_' + name + '"]').remove();
});
Hope this solves your problem.
I have a page which uses dijit/form/Form to validate all of the form widgets in it.
Validation works correctly if I put widgets directly under the Form (tag).
Once I surround the widgets with a dojox/mvc/Group (within the form), Form validation stops completely and none of the widgets seem to validate when I call Form::validate().
Debugging the Dojo code shows that nested widgets are never considered validatable in the Form so when I surround widgets with Group they get excluded from validation.
Is there a workaround for this?
AFAICT from dijit/form/_FormMixin#_getDescendantFormWidgets() and dijit/_WidgetBase#getChildren(), the issue can be solved by adding data-dojo-mixins="dijit/_Container" to the element having data-dojo-type="dojox/mvc/Group".
Also (though I'm not sure if it meets your requirement), dojox/mvc/tests/test_mvc_new_loan-stateful.html example shows form validation solution with dojox/mvc.
Hope it helps.
Best, Akira
It seems like there is no easy way to solve this with dijit/form/Form. At the very least, it should be subclassed or monkey-patched to make it consider nested widgets.
However, it seems that dojox/form/Manager handles nested widgets properly, so I have switched to it.
Switching to Manager required some refactoring since it cannot be simply converted into an object with dom-form (dijit/form/Form can be converted).
HTML code before:
<div
id="_pg_detailForm"
data-dojo-type="dijit/form/Form"
encType="multipart/form-data"
action="" method=""
>
... form widgets (surrounded with MVC Groups...etc)
</div>
After:
<form id="_pg_detailForm">
<div
id="_pg_detailFormManager"
data-dojo-type="dojox/form/Manager"
>
... form widgets (surrounded with MVC Groups...etc)
</div>
</form>
I have a textbox for Age:
<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="2">
Upon clicking submit, this input is instantly bordered red. There is no postback. I'm assuming IE10 believes the client has actually typed in "Age (optional)" which is greater than the maxlength of 2.
Is there anyway to get around this without making the user do anything in their browser's settings and without removing the maxlength attribute?
You can use the novalidate and formnovalidate attributes. See this link for more information.
Internet Explorer 10 and Windows Store apps using JavaScript add new support for HTML5 Forms, including new states of the type attribute (on the input element), new attributes for the input element, and the progress element. This support enables developers to quickly and easily provide user prompting, input validation, and feedback with a minimal amount of script.
Source: http://msdn.microsoft.com/en-us/library/ie/hh673544(v=vs.85).aspx
I faced same problem.
In this case you should change your max length to 10 so it will not be issue for max length and set the max length that you want for your textbox using javascript like following.
function setMaxLength(obj, len) {
return (obj.value.length < len);
}
and call this function like following
<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="10" onkeypress="return setMaxLength(this,2);">
This will resolve your issue.
I had the same issue, in my case it was a GUID field, which was hidden as I didn't need to have it displayed on screen. So I had display:none and maxlength=0.
Yet, IE was performing the validation, the postback was failing and I had no idea why.
It took me half day to figure it out, the solution was to set maxlength=36.
I am using the MvcContrib Grid to display a table on the page. I am using a custom column to produce a checkbox on the table so that the user can select multiple rows and submit the form.
I don't want the form to submit unless at least one checkbox has been selected. I could easily write this Javascript myself to enforce the validation, but I wanted to know how I could fit it in with the unobtrusive library supplied with MVC3.
I imagine I just need to set my inputs with the proper classes and attributes and then the scripts (validate and validate.unobtrusive) on the page should pick them up and mark them as needing validation, but I haven't been able to get the right combination thus far.
Here is the input that I am currently generating:
<input type="checkbox"
name="foo"
value="#item.foo"
class="input-validation-error"
data-val-required="Please select an option."
data-val="true" />
Try setting the data-val attributes on the item, then you have to tell jQuery you have new content to re-parse the form via something like:
$.validator.unobtrusive.parse($('#yourForm'));
where form is of course a reference to your form element.
There is also this great posting and jQuery has a few internal adapters you can call:
from http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2
jQuery.validator.unobtrusive.adapters.addSingleVal("notequalto", "otherproperty", "mynotequaltofunction")
From my experience, a commonly overlooked mistake with displaying client-side validation is putting a Html.ValidationMessageFor(lambda) on the page.
Without that, no client-side validation will fire to prevent the form submit and/or display the message that is generated using annotations on the client-side.
Hope this helps.
<div class="editor-field">
<input class="text-box single-line"
data-val="true" data-val-number="The field Qty Available must be a number."
data-val-range="The field Qty Available must be between 0 and 120."
data-val-range-max="120" data-val-range-min="0"
data-val-required="The Qty Available field is required."
id="QtyOnHand" name="QtyOnHand" type="text" value="12" />
<span class="field-validation-valid" data-valmsg-for="QtyOnHand"
data-valmsg-replace="true"></span>
</div>
The tie-in between the data model annotations and the data-val-* attributes should be clear after reading the above code, but it's where the client side validation ties in might not be so obvious. Open the \Scripts\jquery.validate.unobtrusive.js file and search for "data-val". Right away you'll see that the JavaScript uses the data-val-, input- and field-* CSS classes to display/hide validation messages on the client.
The above is taken from this great article, which you might want to read in full.
Using Spring 2.5 tag library,
I have an Integer value in a command form that's rendered on my page using <form:input path="budget" htmlEscape="true" />
When the value is > 999, it renders the number as value="x,xxx" on the page. My validation isn't expecting the comma and rejects the value.
Is there a fix for the rendering, or do I need to fix the validation and parsing?
As usual, I was just being blind, and discovered that there was a custom property editor bound to the command form in the controller. It was causing the input field to render with commas.
That would have been fine, if there also wasn't a JavaScript validation that rejected the field for having commas in it.