javascript 'tagName' is null or not an object in IE8 - Not validating radiobuttons in Ie8 - javascript-framework

I am using validatious-custom-0.9.1.js framework in my project and I am trying to validate required fields for radio buttons. But it is not validating the radio buttons in IE8. I am getting the following error in console
Message: 'tagName' is null or not an object
Line: 7
Char: 9921
Code: 0
URI: http://validatious.org/design/js/validatious.0.9.1.min.js?1256063644
HTML code used.
<div>
<label for="_button_880">Radio List
<div>
<p>some text</p>
</div>
</label>
<div>
<ul>
<li>
<div>
<div>
<input type="radio" name="radio1" id="radio1" value="Radio1" class="required" title="Required."/>
<label for="radio1">Radio1</label>
</div>
</div>
</div>
</div>
JS where it is failing - First 2 are the examples that are given in the framework file. So you will get to know how it is implemented
/* A radio button field is assumed to be either a list - ordered or unordered -
with some element in front that acts as a label. This may be any element.
If it is not in a list (ie the element does not have "li" parent elements),
the label is assumed to be the element before the first input element.
Example1 (list approach):
<h2>Favourite food:</h2>
<ul>
<li>
<input type="radio" name="food" value="hamburger" id="food_hamburger" />
<label for="food_hamburger">Haburger</label>
</li>
<li>
<input type="radio" name="food" value="pizza" id="food_pizza" />
<label for="food_pizza">Pizza</label>
</li>
</ul>
getLabel() will in this case return the h2 element.
Example2 (no list).
<label class="groupLabel">Favourite food:</label>
<input type="radio" name="food" value="hamburger" id="food_hamburger" />
<label for="food_hamburger">Hamburger</label>
<input type="radio" name="food" value="pizza" id="food_pizza" />
<label for="food_pizza">Pizza</label>
getLabel() will in this case return the first label element
*/
Actual code
getLabel: function() {
var parent = this.__elements[0].parentNode;
//alert(parent1.nodeName); --- Gives 'nodeName' is null or not an object IN Ie8
if (parent1.tagName.toLowerCase() === 'li') { ---Gives 'tagName' is null or not an object
return v2.$(parent1.parentNode).previous();
}
var element = v2.$(this.__elements[0]).previous();
return element || this.base();
}
Required field validation in the js file
v.reg('required', function(field, value, params) {
return !v2.empty(value) && !(typeof value.length !== 'undefined' && value.length == 0);
}, null, null, 'not-empty', false);
It works fine in firefox, IE7 and IE9. But in Ie8, I get message tagName is null or not an object.
Can somebody please help me in this. If this is solved, then this framework will be very useful to avoid all the hardships in validating.
Thanks in advance..

Related

How to add form validation on group of radio button using jquery form validation plugin

How to add form validation on group of radio button using jquery form validation plugin. I have tried to add data-validation="required" but its not working.
PFB HTML code :
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" data-validation="required">
<label for="inlineRadio1" data-validation="radio_button"> Inline One </label>
<input type="radio" id="inlineRadio2" value="option2" name="radioInline" data-validation="required">
<label for="inlineRadio2"> Inline Two </label>
</div>
Script code is :
$.validate()
I have taken the plugin from this url http://www.formvalidator.net/
You have to make a custom validator called custom radio. and add the attribute "data-validation="custom_radio" on input type
PFB code for your reference:
<div class="radio radio-info radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" data-validation="custom_radio">
<label for="inlineRadio1" data-validation="radio_button"> Inline One </label>
<input type="radio" id="inlineRadio2" value="option2" name="radioInline" data-validation="custom_radio">
<label for="inlineRadio2"> Inline Two </label>
</div>
This is javascript code for custom validator where you return boolean based on value. which should get called before $.validate() function.
$.formUtils.addValidator({
name : 'custom_radio',
validatorFunction : function(value, $el, config, language, $form) {
if(value==='option 1'){
return false;
}else{
return true;
}
},
errorMessage : 'You have to atleast check one radio',
errorMessageKey: 'badradiobutton'
});
$.validate()

I am unable to click on a link with class selectable using watir webdriver

I been trying to click on a link with class "selectable" without success.
The html code is as display below:
<div class="form-group">
<label for="txtEmail">Email</label>
<label class="selectable col-xs-offset-2">
<input type="checkbox" id="chkNoEmail" data-bind="checked: noEmail, attr: { 'disabled': baseController.readonly() }">
</label>
<a class="selectable" data-toggle="popover" data-bind="click: baseController.noEmailClicked, popover: { title: '', customClass: 'popover-lrg popover-alert', contentHtmlId: 'noEmailAlert', onlyIf: function () { return noEmail() } }" data-original-title="" title="">no email</a>
<input type="text" class="form-control" id="txtEmail" placeholder="Email" data-bind="value: email, attr: { 'disabled': noEmail() || baseController.readonly() }"><span class="validationMessage" style="display: none;"></span>
</div>
I have try using the parent div and also using
browser.selectable(:text, /no email/).click
and
browser.selectable(:text, /no email/).fire_event("onclick") but not success.
I would try something like this.
#browser.div(:class => "forum-group").label(:class => "selectable").check
However, I am not sure you can do a ".check" on a label element. You could also try
#browser.div(:class => "forum-group").checkbox(:id => "chkNoEmail").check
Or, since I dont think it is an actual check box, you could try ".click" instead of ".check" on either one of them, I still do not think you can do either action on a label element though.

how to validate a form without displaying any error messages

I do not understand how I can validate a form with jquery validate to display the Submit button or not.
My javascript is as follows:
ko.bindingHandlers.jqValidate = {
init: function (element, valueAccessor, option) {
var element = element;
var validateOptions = {
ignore: [":hidden:not(required)"],
focusCleanup: true,
onsubmit: true
};
function displaySubmitButton() { // Remove/Add class to submit button
if ($('form').valid()) $('.toSave').show();
else $('.toSave').hide();
}
$('form').bind('onchange keyup onpaste', function (event, element) {
if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
else if ($(element).not('.resetForm')) $('.toSave').hide();
});
}
};
My form :
<ol class="MutColor13 mouseOver" data-bind="jqValidate: {}">
<li class="rightCol">
<strong>
<label for="iEmailReply"><asp:Literal runat="server" ID="lEmailReply" /></label>
</strong>
<input id="iEmailReply" name="EmailReply" type="text" tabindex="2"
class="MutColor13 email"
data-bind="value: communication.Message.ReplyEmail, valueUpdate: 'afterkeydown'"
required="required" />
</li>
<li class="leftCol">
<strong>
<label for="iEmailFrom"><asp:Literal runat="server" ID="lEmailFrom" /></label>
</strong>
<input id="iEmailFrom" name="EmailFrom" type="text" tabindex="1"
class="MutColor13 email"
data-bind="value: communication.Message.SenderEmail, valueUpdate: 'afterkeydown'"
required="required" />
</li>
<!-- and more form input -->
</ol>
My submit button :
<div class="buttonBlock rightButton" data-bind="fadeVisible: validateMessage()">
<a class="MutButton3 toSave" data-bind="click: saveMessage"><span class="MutButton3">submit</span></a>
</div>
when I type "$ ('form'). valid ()" in the firebug console, all error messages appear. I do not think the submit button is the problem because I have not clicked at this point
How do I enable the display of the error message from the input short change while allowing the display of the submit button if fields (and any other form fields in the page) if all fields are valid?
I was inspired by this question: jquery validate: IF form valid then show submit button
a working demo : http://jquery.bassistance.de/validate/demo/
but the button is displayed continuously
ok I think this could work:
http://jsfiddle.net/Ay972/10/
what I did :
$('form').bind('change oninput', function (event, element) {
console.log('formLive :: ', $(event));
if ($('form').valid() === true && $(element).not('.resetForm')) $('.toSave').show();
else if ($(element).not('.resetForm')) $('.toSave').hide();
});
the 'change oninput' seems to work.

What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?

What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?
I don't get the expected results when using the following:
HTML
<div id="itemsView"
data-role="view"
data-model="vm">
<ul data-role="listview" data-bind="source: items"
data-template="itemsTemplate">
</ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<li>
#=Name#
</li>
</script>
<input type="text" data-bind="value: newValue" />
<button data-role="button" data-bind="click: update">update</button>
</div>​
JavaScript
var vm = kendo.observable({
items: [{
Name: "Item1"}],
newValue: '',
update: function(e) {
var item = this.get("items")[0];
item.set("Name", this.get("newValue"));
//adding the follwoing line makes it work as expected
kendo.bind($('#itemsView'), vm);
}
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"});​
I expect the listview to reflect the change to the Name property of that item. Instead, a new item is added to the listview. Examining the array reveals that there is no additional item, and that the change was made. (re)Binding the view to the view-model updates the list to reflect the change. Re-Binding after a change like this doesn't seem to make any sense.
Here is the jsfiddle:
http://jsfiddle.net/5aCYp/2/
Not sure if I understand your question properly: but this is how I did something similar with Kendo Web UI, I expect mobile is not so different from Web UI from API perspective.
$element.kendoListView({
dataSource: list,
template: idt,
editTemplate: iet,
autoBind: true
});
The way I bind the listview is different, but I guess you can get similar results with your method as well.
I pass two templates to the list view, one for displaying and one for editing.
Display template contains a button (or any element) with css class k-edit to which kendo will automatically bind the listview edit action.
display template:
<div class="item">
# if (city) { #
#: city #<br />
# } #
# if (postCode) { #
#: postCode #<br />
# } #
<div class="btn">
<span class="k-icon k-edit"></span>Edit
<span class="k-icon k-delete"></span>Delete
</div>
</div>
Edit template
<div class="item editable">
<div>City</div>
<div>
<input type="text" data-bind="value: city" name="city" required="required" validationmessage="*" />
<span data-for="city" class="k-invalid-msg"></span>
</div>
<div>Post Code</div>
<div>
<input type="text" data-bind="value: postCode" name="postCode" required="required" validationmessage="*" />
<span data-for="postCode" class="k-invalid-msg"></span>
</div>
<div class="btn">
<span class="k-icon k-update"></span>Save
<span class="k-icon k-cancel"></span>Cancel
</div>
</div>
Clicking that element will put the current element on edit mode using the editTemplate.
Then on the editTemplate there is another button with k-update class, again to which kendo will automatically bind and call the save method on the data source.
Hopefully this will give you more ideas on how to solve your issue.
The problem was caused by the <li> in the template. The widget already supplies the <li> so the additional <li> messes up the rendering. This question was answered by Petyo in the kendo ui forums

input fields not showing in hide/show div with radio buttons

I have a very basic hide/show div function set up for when people click a certain radio button. In one of the hidden divs I need to create a form however when I add input fields to the hidden div my function stops working.
<div id="tabs">
<div id="nav">
<input type="radio" name="primary_contact_director" value="Yes" class="div1">Yes</input>
<input type="radio" name="primary_contact_director" value="No" class="div2">No</input>
</div>
<div id="div1" class="tab">
<p>this is div 1</p>
</div>
<div id="div2" class="tab">
<p>this is div 2</p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
This code works however when I add
<label class="title">First Name:</label>
<input type="text" name="first_name" class="form">
<label class="title">Last Name:</label>
<input type="text" name="last_name" class="form">
<label class="title">Business Address:</label>
<span class="instructions">Please enter a physical address. P.O. Boxes are not acceptable for filing.<br>
If your business is run out of your home, please list that address.</span><br>
<input type="text" name="business_address" class="form">
<label class="title">City:</label>
<input type="text" name="business_city" class="form">
<label class="title">State</label>
<select name="business_state">
<option value="California">California</option>
</select>
<label class="title">Zip Code:</label>
<input type="text" name="business_zip" class="form">
<label class="title">Business Phone Number:</label>
<input type="text" name="business_phone" class="form"><br>
to my div2 it stops working.
Hopefully this is a clear explanation. Any help is always appreciated!
In your hideTabs() function, you've got two typos.
First, you're iterating through the tab[] array, but you're checking it against the length of the nav[] array. This works because you have the same number of elements in your first example, but that's just a coincidence. If you evaluate it against the tab[] array's length, it will work better. The other problem you have is that your for loop ends at greater-than-or-equal-to length. THe problem is that arrays start counting at zero, so if the length is 3, the items on the list are tab[0], tab[1], and tab[2]. your code was trying to set something for tab[3], which didn't exist.
Here's the working code:
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<tab.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}
In the future, you should look into using the javascript console in Chrome (or any other browser) to check for errors if your scripts stop working—usually there's an error that that will give you hints as to what's happening.

Resources