Overriding dijit validator function and using regExp attribute - dojo

I'm new to dojo and could really use some help with the following 2 field validation examples.
In the following example of a dijit.form.ValidationTextBox field specifying the validator property seems to override the use of the regExp. (ie the field no longer adheres to the regExp rule). How to I make it do both?
<input dojoType="dijit.form.ValidationTextBox"
type="password"
name="password2"
id="password2"
maxLength="50"
trim="true"
regExp="[\w]+"
required="true"
validator="return this.value == dijit.byId('password').value"
invalidMessage="Confirmation password must match password"
/>
I have another similar example where one field depends on the value of another, but I don't have the syntax correct.
<input dojoType="dijit.form.ValidationTextBox"
type="text"
name="homePhone"
id="homePhone"
style="width:20%"
maxLength="10"
trim="true"
required="false"
regExp="[\d]{10}"
validator="return (dijit.byId('preferredContactMethod').value == "home") && (this.value != null)"
invalidMessage="Home phone required (ie. 9198887777)"
/>

Correct; the default implementation of dijit.form.ValidationTextBox.prototype.validator() is to match this.value against this.regExp, as well as check against the various other constraints like this.required. Take a look at the source to see how it's done. If you override that, you're on your own to provide an implementation. Your implementation might choose to delegate to the prototype method and logically 'and' the results with your own tests. You could also override isValid, I suppose.

Related

VueJS conditional class appended to mandatory class

Not sure how to do this, I remember reading something like the syntax below to make the appended "disabled" string conditional in the class. "form-control" should not be ommitted.
<input type="text" :class="{'form-control ':true}, {'disabled' : edit===true}">
You can just mix two of those (static and dynamic classes), according to VueJS docs:
In addition, the v-bind:class directive can also co-exist with the
plain class attribute.
<input type="text" class="form-control" :class="{disabled: edit}">

TestStack.Seleno TickCheckbox not working

I have 2 forms that I am testing using TestStack.Seleno. Both forms have a checkbox that is mandatory. The first form has (including the checkbox) 5 fields. I can use TestStack.Seleno to create a passing test with valid data. I set the checkbox like this:
Input.TickCheckbox(f=>f.Accept,form.Accept);
On my other form which has 10 or so fields, when I try to set the checkbox to be ticked (using the same code) nothing happens. However when I try
var acceptCheckBox = Find.Element(By.Name("Accept"),new TimeSpan(0,0,0,50));
if (form.Accept)
{
acceptCheckBox.Click();
}
I get error "Element is not currently visible and so may not be interacted with"
Element is clearly visible and is not injected in using javascript.
I am using latest version of TestStack.Seleno from github.
Any ideas?
So I have managed to figure out what the issue is and have a work around, however I cannot explain why it works on the other form. The mandatory Accept field has html generated by mvc that looks like
<div>
<input class="check-box" data-val="true" data-val-mustbetrue="The Accept our field is required" data-val-required="The Accept our field is required." id="Accept" name="Accept" type="checkbox" value="true"><input name="Accept" type="hidden" value="false">
<label for="Accept">
Accept our Please accept our Terms and Conditions
</label>
<span class="field-validation-valid" data-valmsg-for="Accept" data-valmsg-replace="true"></span>
</div>
So you have the checkbox and hidden field both with id Accept, I suspect in code seleno is picking up the hidden field and setting value, so I updated my code todo
var acceptCheckBox = Find.Element(By.CssSelector("#Accept.check-box"));
acceptCheckBox.Click();
Now everything works.
Ismail

Input hidden is built without value

Weird this one.
On my .NET MVC 4 project I've added a file on App_Code who contains this method:
#helper CheckBox(string name, bool isChecked = false, string className = "") {
<div class="checkboxHolder">
<input id="#name" name="#name" type="hidden" value="#isChecked") />
<i class="#className checkboxBts fa #((isChecked) ? "fa-check-square-o" : "fa-square-o")" data-checkbox-associated="#name"></i>
</div>
}
I'm using it to style checkboxes using font-awesome, so my app checkboxes are made of an input type hidden who stores a boolean value and an icon to give feedback to users.
Weird thing is, on executing when isChecked == false, the hidden returned by this method is like:
<input id="myCheckboxId" name="myCheckboxId" type="hidden" />
There is no value at all, when I try to save it to the model an exception is thrown saying that model cannot be saved.
I've fixed it changing the method to use:
<input id="#name" name="#name" type="hidden" #((isChecked) ? "value=true" : "value=false") />
Which is working fine. However, I wonder if anyone know what could be happening on the original output.
Thank you all.
It's not entirely a duplicate, but this is answered in Why is my hidden input writing: value=“value” instead of true/false?:
if you have:
<input name="somefield" type="hidden" someprop="#(SomeBooleanExpression)"/>
[and #SomeBooleanExpression] is false it is omitted completely:
<input name="somefield" type="hidden"/>
To get around this, consider .ToString()
So, use:
<input id="#name" name="#name" type="hidden" value="value="#(isChecked.ToString())" />

Javascript, and radio buttons

OK here is the deal. I have a survey that I am putting up with over 60 questions. I want to make them all mandatory. I really need to know if the group has a value, don't care what it is.
Here is what I have, but it is only giving me the first value.
<function CheckField(myFieldName, myText){
var x=document.getElementById(myFieldName).value;
window.alert(myFieldName + "1: " +x);
. . .. . .
OK so this returns the first value of 5. It does not matter what I select. All I just need to know if they selected something if not I want to mark the question with a different color so the user knows to go back and answer the question.
You can try HTML5 required:
<label><input type="radio" name="option" required /> Option 1</label>
<label><input type="radio" name="option" /> Option 2</label>
You can use it on one radio (per each name), or on all of them (see HTML5: How to use the "required" attribute with a "radio" input field).
Option 1: (EASY!)
Having the attribute "checked" set to "true" would make have a default value either way.
<input type="radio" name="option" />Option 1
<input type="radio" name="option" checked="true" />Option 2
You could also use required instead of checked attribute but some browsers don't support it like Safari.
For info on support:
required
checked
Option 2:
JSFiddle:
http://jsfiddle.net/FE7sK/2/
jQuery(function () {
jQuery('#validateOpt').bind('click', checkRadio);
})
function checkRadio() {
var isChecked = jQuery("input[type=radio]:checked").val();
var booleanVlaueIsChecked = false;
if (isChecked) {
booleanVlaueIsChecked = true;
$('#form1').submit();
} else {
alert("aaa");
}
}

How to disable autocomplete for Struts tags(HTML:text)

For normal HTML input tag,disabling autocomplete is simple as given below:
<input type="email" name="email" autocomplete="off">
Whereas its does not work for Struts tags given below:
<html:text property="" styleId="Field" maxlength="4" size="4" tabindex="14"
onblur="check(this);" value="" />
How to disable autocomplete for Struts tags?
Autocomplete attribute is not passed through to the rendered HTML by the tag.
You can do so by writing your own custom tag that extends the tag to accept the autocomplete attribute and pass it through to the rendered tag.
check these links ::
Struts 2 + Disable Form Autocomplete
http://www.coderanch.com/t/54020/Struts/form-input-tags-turning-autocomplete
I've met the same issue. Editing the tld attibutes did not help me. I resolved it by adding the attribute via JavaScript code. Here is an example:
<bean:define id="autoComplete" scope="request" type="java.lang.String"
value="<%=String.valueOf(ApplicationConfiguration.getAutoComplete()) %>" />
<script>
var ttip;
var ttip2;
Ext.onReady(function() {
var form = document.forms['formName'];
var elem = form.elements["passortField"];
elem.setAttribute( "autocomplete", "${autoComplete}" );
ApplicationConfiguration.getAutoComplete() - returns either on or off, depending on application configuration
Another option is to write your Own TextTag class something like this:
public class TextTagNoAutoComplete extends BaseFieldTag {
public TextTagNoAutoComplete() {
super();
this.type = "text";
doReadonly = true;
}
protected void prepareOtherAttributes(StringBuffer handlers) {
prepareAttribute(handlers, "autocomplete", "false");
}
}
and point textnac to this class in your tld mapping! ..and Viola ! Not the best reusable code. Provided the fact that, Struts 1.x is in no way going to be revisited, this sortta monkey patching is more than enough in my point of view :)
You can use redisplay="false" which is the equivalent in struts-html for autocomplete.
We can use the attributes which are not supported in <htm-text> inside \"
<html:text property="userName" styleId="firstname\" placeholder=\"Email*\"
autocomplete=\"off" styleClass="ql-inpt" readonly="true" />