I am trying to use Knockout Validation in combination with Bootstrap Combobox Plugin.
I have a select control that is bound to my observable property which has the required attribute (for KO Validation).
<select data-bind="attr: { options: TypeAheadSource, value: XYZ, validationOptions: {errorElementClass: 'input-validation-error'}, typeaheadCombobox: {}"></select>
I have a custom binding associated with the select control in which I basically just call the Bootstrap Combobox Plugin. That creates a Div with an input control over the select control and hides the select control.
The knockout validation fires up when I dont select a value in the comobox and shows the error message next to the control BUT the field is not highlighted. Here is how it looks like
As you can see, the error message shows up but the input field is not highlighted.
Here is the final html that is generated when the validation fires.
<div class="combobox-container">
<input style="position:static;" type="text" autocomplete="off" data-bind="{ value: Name, validationOptions: { errorElementClass: 'input-validation-error' }" class="input-large">
<span class="add-on btn dropdown-toggle" data-dropdown="dropdown"><span class="caret"></span>
<span class="combobox-clear"><i class="icon-remove"></i></span></span>
<select data-bind="validationOptions: { errorElementClass: 'input-validation-error' }, options: TypeAheadSource, value: Name, typeaheadSimpleCombobox: { }" class="combobox input-validation-error"></select>
</div>
As you can see, the select control (which was hidden by the plugin) gets the validation error class I defined ('input-validation-error') but the input control created by the plugin does not.
That is the main issue here.
So, I thought it could be becasue the input control is not directly bound to the property. So, I tried adding the same value binding as the select control to the input control created by the plugin inside the custom binding. I also added the validationOptions binding. These changes didnt work either.
Strange thing is I also have a typeahead textbox bound to another property which uses a similar design (custom binding to create the typeahead plugin over an input control) and the validation + highlighting works perfectly on that. Here is the final html from that.
<input type="text" data-bind="value: xyz, validationOptions: { errorElementClass: 'input-validation-error' }, typeaheadTextBox: { source: $data.TypeAheadSource }" class="typeaheadValue input-mini" data-provide="customtypeahead" autocomplete="off">
Could someone tell me if I am missing any additional steps. I am sure you might need more details.
Please leave a comment and I will try to add more details.
Thanks.
I figured the issue. In case someone has the same issue, here is what I did.
Even though I setting up the value bindings on the input control created by the plugin, the bindings were applied before the control is created and so, I had to reapply the bindings specifically on the input control created by the plugin. That did the trick for me.
Related
I'm using matInput. What I want is that the content in matInput is marked/highlighted so that if I press any key the text gets deleted. For example you double click a word in the search bar here in stackoverflow. How can I archieve that?
<mat-form-field>
<input matInput [(value)]="test">
</mat-form-field>
Assuming you're using Angular 8, you can use #ViewChild decorator to get a reference to your input element. Then you select the input value within the ngAfterViewInit lifecycle hook. In order to link the input element with #ViewChild, you can use a template reference variable (e.g. #food).
Please have a look at the following StackBlitz
Please note that using setTimeout inside ngAfterViewInit prevents you from getting an ExpressionChangedAfterItHasBeenCheckedError.
I am trying to track form submission for a form using event based rule in DTM. I know that the ideal way to do it is to do via direct call rule but need to track the form fields as well through a data element and then into an eVar.
The form code looks something like this on the page:
<div style='display:none'>
<div id="popupform">
<div class="form_container">
<img src="/images/New-Offer-Pop-Up-Without-form_18-Jan-16.jpg" style="width: 100%;">
<form class="offerform" accept-charset="UTF-8" action="/site/sendtohs">
<div class="formrow"><input type="text" name="popup_fullname" class="new-input1 required" placeholder="Name" /></div>
<div class="formrow"><input type="email" name="popup_email" class="new-input1 required" placeholder="Email" /></div>
<div class="formrow"><input type="number" name="popup_phone" class="new-input1 required" placeholder="Mobile"
minlength="10" maxlength="15" /></div>
<input type="hidden" name="popup_url" value="/" /></br>
<p align="right"><input class="tbn newtbn" type="submit" name="submit" value="Submit" /></p>
</form>
</div>
<div class="offerform_success" style="display: none">
<img src="/images/Thank-you-pop-up-new-xyz.jpg" style="height: 440px; width: 100%; position: absolute;width: 99%;">
</div>
</div>
</div>
The even based rule in DTM is :
DTM Rule
The event fires when I click on the Submit button but the rule does not validates if the form fields have been filled or not. Any hints how can I add validation to the form submit event within DTM.
Targeting the form
Firstly, based on your screenshot vs. posted code, your event will not trigger because the form tag does not have an id attribute of "popupform" (or any id attribute at all) (You do have that as an id in a parent div, but that's not what you are targeting). So, you will need to remove that.
If you only want to target the form if it's within a div, then you will need to add it as a Rule Condition. Under Rule Conditions > Criteria, choose "Data > Custom", and click Add Criteria.
In the code box, add the following:
if ($(this).parents('#popupform').length)
return true;
return false;
Note: I'm using jQuery syntax here for brevity and easy cross-browser compatibility. The overall goal is this references the targeted form, and you want to check that it is within an html element with the popupform id. The jQuery above traverses up the form's ancestor chain to look for it. If it finds it, we return true. Otherwise we return false. Ultimately, custom rule conditions should return true if you want it to pass, or false if not. Also note that if you have multiple rule conditions (which you will; see below), all conditions must return true in order for the rule to trigger. If your site does not use jQuery or you do not want to use jQuery for this, then you will need to write your own code following the above concept.
Validating the form fields
Before I get into this, one thing I should note is in general you should not rely on client-side form validation for your forms. It is super easy to disable/get around it. You should be doing form validation with server-side code when the form is submitted, and then pop whatever you need to pop (form complete tracking or w/e) after it has been server-side validated.
Maybe you already have server-side validation in place but for whatever reason you can't control popping a dtm rule after validation, and this is your next best thing. Well hopefully the only thing you are doing is popping tracking and not using the dtm rule for actual site functionality, but even then, just want you to be aware that this is a "lesser evil" solution, not a "good" solution.
Having said that, you can again turn to a custom condition to make sure all the form fields are filled out. Here is a quick and dirty custom rule condition to demonstrate. Again, under Rule Conditions > Criteria, choose "Data > Custom", and click Add Criteria (so you will now have another custom code box). Add the following:
var isFieldsFilled=true;
$.each($(this).serializeArray(),function(i,v) {
if (!v.value||v.value=='')
isFieldsFilled=false;
});
return isFieldsFilled;
This code again uses jQuery to grab the form fields of the targeted form and loops through them and sets a flag to false if one is found not to have a value. Again, this is kind of quick and dirty and will work based on your current form example, but you may need to expand upon it in practice.
Let's assume I've got Polymer custom control like:
<template if="{{editMode}}">
<input id="myInput" type="text">
</template>
<div on-doubleclick="{{setEditModeToTrue}}">
some stuff here
</div>
Now I want #myInput to be text focused everytime editMode is true. The problem is that in the setEditModeToTrue handler #myInput is not yet in DOM tree so I can't focus it by:
root.QuerySelector('#myInput').focus();
(And yes I tried setting autofocus attribute on input but it works only for the first double click)
Is there any event or something else letting me know that template-if content is in DOM tree ?
You can wrap or extend the input element and put your code in the attached or ready lifecycle method or use MutationObserver.
This page is to edit the account information.
Template file,
<input type="text" id="account_name" class="form-control" placeholder="Enter Name" value="<%=account.name%>"/>
<input type="text" id="account_company_name" class="form-control" placeholder="Enter Company Name" value="<%=account.company_name%>"/>
<a id="account_next_btn" class="btn" role="button">Next</a>
view file,
events:
'click #account_next_btn': "updateAccount"
updateAccount: (e)->
e.preventDefault()
#account.save({"name": #$el.find("#account_name").val(),"company_name": #$el.find("#account_company_name").val()})
ok, this works fine. it sends the updated input form parameters.
the thing i'm curious is, there should be a better way, not setting the updated values manually like my code.
in rails backbone:scaffold it doesn't have this kind of code.
it just
#model.save()
that is all they do.
but in my code, if i just call
#account.save()
it sends the parameter, that not have been updated.
That’s because Backbone by default doesn’t include any kind of data binding library. Data binding lets you keep a model attribute synced with a form field value.
Backbone-Rails includes the simple backbone_datalink.js, which sets up a simple form binding when you create the scaffold.
There are many other binding plugins that work with Backbone, such as Backbone.ModelBinder and Rivets.js.
I am trying to hook the JuiceUI datetimepicker onto a date textbox input field. However, even though I have assigned an ID to the Html.TextboxFor(c => Model.Birthday) control, but for some reason JuiceUI doesn't see this ID, and I get the following error:
Value cannot be null. Parameter name: Targetcontrol is null.
<%=Html.TextBoxFor(c => Model.BIRTHDATE, new { id = "txtBirthday"}) %>
<Juice:Datepicker ID="dpBirthday" runat="server" TargetControlId = "BIRTHDATE" />
when I run the Developer Tools in IE, the id shows up:
<input name="BIRTHDATE" class="text-box single-line" id = "BIRTHDATE" type="text" data-val-required="The BIRTHDATE field is required." data-val="true" value=""/>
Is there a reason why Juice UI's datepicker isn't seeing the ID of the control that I want to hook it into? Should I be using something else to attach a simple jQuery datepicker?
There's a release of JuiceUI pending that includes MVC support (the source for this version is on github, though I'm not sure why it hasn't been released yet). It looks like you're trying to mix mvc with webforms controls? That's not likely to work, as webforms controls rely on the underlying page structure.