Knockout Validation evaluates immediately on load - validation

I'm using MVC, Knockout, and Knockout Validation to validate my view model.
I'm running into an issue where the validation for view model properties are firing immediately upon loading. In other words, "This field is required" shows up next to my inputs before a user has attempted to change their values.
This problem is specifically happening with dropdown (select) controls.
I'm guessing that this is a problem that I've created by somehow unintentionally changing/accessing/mutating the observable in another part of my javascript code. However, I don't know how to track this down.
Is there a way that I can somehow subscribe or track the even that fires that causes validation in Knockout Validation? I just need to know why this is firing in the way it is. I'm pretty confident that the value of the isValid() function is consistently false.
Here's a sample of how my HTML is setup on page load, unmolested:
<select class="highlightable validationElement" name="obsstate" data-bind="value: standardAnswers.ans106_1.value" required="true">
<option value="">-- Select -- </option>
<option value="AK">AK</option>
<option value="AL">AL</option>
etc...
</select>

After applying the bindings for the viewmodel. Then for that viewmodel make showAllMessages as false
Example
YourViewmodelname.errors.showAllMessages(false);

Quoting KO page.... ( http://knockoutjs.com/documentation/options-binding.html )
KO will prefix the list of items with one that displays the text “Select an item…” and has the value undefined. So, if myChosenValue holds the value undefined (which observables do by default), then the dummy option will be selected. If the optionsCaption parameter is an observable, then the text of the initial item will update as the observable’s value changes.
So, I solved it by setting "undefined" when defining the property, see example below:
self.myProperty = ko.observable(undefined).extend({
required : {"Field Required"}
});
Hope this helps...

I figured out this issue on my own.
The problem exists between the razor engine templating the select options, and then later binding the value of the selected element to Knockout.
Despite the fact that there is no user-inputted value in the select box, the default value, the "--select--" actually contains a value. In my case it was an empty string. Therefore, when I applied the knockout bindings, my viewmodel property was "updated" with the empty string value, and therefore validation fired.
To get around this in my case I set the default value of my model to be an empty string. Therefore when the bindings are applied, there is no valueHasMutated event fired on the Knockout observable, and thus no validation.

Related

Can you programmatically mark a validation observer as touched?

In my scenario I want to disable a save form button if the form has not been touched. I'm currently using v-slot="{ untouched }" on the validation-observer to achieve this. One of my checkboxes, however, is not wrapped in a validation provider. I.e., it's optional/not required. The problem is that whenever the checkbox value changes, my validation observer still has untouched set to true (assuming that's the only thing I've changed in the form). So I can't save my form even though I made a change to a boolean value. Is there a way where I can set my validation observer to istouched = true when my checkbox is changed? Or perhaps I need to manually check controls that have been changed that are not wrapped in a validation-provider tag.
FYI I'm using vee-validate 3.0

How to set minLength for PrimeFaces autocomplete

I have dialogbox which consists an autocomplete element and several other fields depending on it. What I want is to run completeMethod when autocomplete field is empty. However, this method executes only there is one or more character in the field. For instance, assume I typed 'x', then if I remove it, it should be called. I need to know if it is empty because I will change other fields according to it. I already tried minLength but it has no effect whatsoever
<p:autoComplete id="findCommand" value="ControllerClass.someObject
completeMethod="#{ControllerClass.completeCommand-returns objects-}/..>
<p:ajaxlistener="#{ControllerClass.onCommandChange} update="someotherfield"
event="itemSelect" /></p:autoComplete>
The completeCommand method won't be called if the field is empty. Here is what I tried:
1- I added an ajax tag with change and assigned some other method to it to control the field. But it
ruins itemSelect ajax, since it tries to assign query string to object when user types something, which is wrong.
2- I tried to use second answer, however since I can't figure out if field is empty, it has no use:
JSF access html element value in bean class
minQueryLength = "0" worked. Here is the link I've found this.
http://www.primefaces.org/docs/vdl/6.0/core/
You can select autocomplete from the left menu

Clicking multiple submit buttons with mechanize

I'm working on a script with mechanize in Ruby. I'm trying to select the values of the form(dropdown), however the values for the second field of the form don't appear until the first field has a selection. It prevents the following -
my_form[0].options[2].select
my_form[1].options[2].select
my_form[2].options[2].select
my_form[3].options[0].select
because the second field doesn't have any value at this point. The selection of the first part works like it should, however.
The line in the form looks like this
<select id="DistrictId" name="DistrictId"><option value="">---SELECT---</option>
<option value="3">Alaska Gateway School District</option>
...
</select>
<input type="button" id="selectDistrict" value="SELECT">
I see there is a Select button after the field, however I'm not sure on how to click it and have the second field populate.
When I use the following
my_form.button_with(:value => "SELECT").click
I don't get an error, but it also doesn't repopulate the second field. I tried placing that line after the selection of the first field, and it gets me no further.
I haven't seen anything that is super helpful with dropdown menus.
Use a Login form with Mechanize was helpful in dealing with the form, but didn't help with actually selecting that button.
The other thing that I need this to do is to loop though all of the options in the drop down menus.
I've been able to find some things about dropdowns and python, which has also helped.
I can select the part with the
.options[x]
But I am unsure as to how to know when to end the looping. It looks like the elements are stored as an array, and so I can just do .each do on the forms. http://crabonature.pl/posts/23-automation-with-mechanize-and-ruby was helpful for going through the form, but it all comes back to having to select the top form value before being able to see the values in the fields under it.

MVC6 Taghelper Select Control with Selected Item in indexed model

I am trying to set the selected value of a select control based on a model in an indexed situation. I have the following code -
<select asp-for="Items.Details[i].One"
asp-items="Utility.DropdownListItems(date, Model.Items.Details[i].One)">
</select>
I am setting the selected item in the Utility that returns the SelectList, and would expect that to set the selected item of the drop down, but that doesn't work. If I inspect the option elements, none have the selected tag.
I know there was an issue with indexed data in previous iterations of Mvc HtmlHelpers. Does anyone know if this was resolved in MVC6?
For both HTML and tag helpers, generated <option> elements are selected based on the expression value (Item.Details[i].One in your case). IsSelected from the select list matters only if the expression value is null i.e. in the Create case.
We have corrected a number of issues related to indexed data in MVC 6. Please file an issue at https://github.com/aspnet/Mvc/issues if something is still not working.

h:selectBooleanCheckbox inside rich:extendedDataTable

I have a rich:extendedDataTable that shows some model. Now i need to add a new column, that will contain a checkbox in it, so, for each row of the table now i have a checkbox. The initial status of this checkbox will depend on some attribute of the current item in that row, so that´s not a problem.
The problem is that i need to fire some method or listener when any of the checkboxes is pressed, so i can refresh (server-side) the boolean status of the attribute that represent that checkbox. This must be accomplish with ajax. I don´t need to re-render anything, just to refresh the boolean attribute in the database.
I have write a checkbox listener for valuechanged, but i´m not sure if this works with ajax and, besides that, i don´t know how to retrieve the current item, i mean, the item that correspond to the row in which the checkbox was pressed. I have tried a lot of things but neither seems to work.
I really can´t have a commandButton in the new column, which would simplify things a lot in this case. It has to be a checkbox.
The backing-bean associated is session-scoped.
Thanks you and excuse my english!
I finally solved this by using f:ajax and f:attribute in order to pass the row item.

Resources