First:I know, that there is an example on the formvalidation.io-website with a table with 5 rows and they are validated at one time with the submit-button - but that's not what I want.
My goal is:I have an table with unknown number of rows. Each row has two input fields "Name" and "Description". With focusout-event I want to validate only the fields in the row which formerly had the focus. I have no idea how to realise that. But I'm sure that I'm not the first who want's to do that.
Thank you for your answers!
HTML
<form id="Formular0">
<table id="Formular0Table0">
<thead>
<tr>
<th name="Name">Name</th>
<th name="Desc">Description</th>
<th></th>
</tr>
</thead>
<tbody id="Formular0Table0Tbody">
<tr data-groupid="1">
<td><input type="text" name="Name" value="Group1"></td>
<td><input type="text" name="Deschription" value="Deschription3"></td>
<td><button type="button" name="btnSave">save</button></td>
</tr>
<tr data-groupid="2">
<td><input type="text" name="Name" value="Group2"></td>
<td><input type="text" name="Deschription" value="Deschription3"></td>
<td><button type="button" name="btnSave">save</button></td>
</tr>
<tr data-groupid="3">
<td><input type="text" name="Name" value="Group3"></td>
<td><input type="text" name="Deschription" value="Deschription3"></td>
<td><button type="button" name="btnSave">save</button></td>
</tr>
</tbody>
</table>
Am getting the below error:
stale element reference: element is not attached to the page document.
When I select a country from the country dropdown the page gets refreshed since we have used 'onchange' attribute, so when i try to locate rest of the fields in the form its throwing me the stated exception.
Note: I have cross verified the locators before and after the page gets loaded,
there is no change in it as most of the locators used are id's.
Here is my HTML,
<form method="post" action="/eClaims/app" name="mainForm" id="mainForm"
accept-charset="utf-8">
<div style="display: none;">
<input type="hidden" name="formids"
value="ifErrors,hasErrors,If,If_0,statusDate1,If_1,If_3,If_5,If_7,If_2,callDate,If_8,If_4,countryList,If_9,If_6,languageList,If_10,If_11,If_12,customerEmail,If_13,If_14,customerTitle,If_15,customerFirstName,If_16,If_17,customerLastName,If_18,customerCompany,If_19,If_20,If_21,customerFaxPhoneCode,customerFaxNumber,If_22,If_23,customerPhoneCode,customerPhoneNumber,If_24,If_25,qualificationSystem,If_26,If_27,caseId,If_28,If_29,productNumber,If_30,If_31,serialNumber,If_32,If_33,If_34,purchaseDate,If_35,If_36,problemDescription,If_37,qualificationAgent,If_38,If_39,If_40,cancelDoaAuth,If_41,Submit_0,If_42,Submit_1,If_43,Submit_2,If_44,If_45,If_46,If_47,Submit_6,Submit_7,Submit_8">
<input type="hidden" name="component" value="mainForm"> <input
type="hidden" name="page" value="DoaAuthorisationForm">
</div>
<table width="100%">
<tbody>
<tr>
<td colspan="3"></td>
</tr>
<tr class="theme">
<th width="100%" colspan="3">
<h2 class="themeheader">Authorisation to return DOA product</h2>
</th>
</tr>
<tr>
</tr>
<tr>
<td colspan="10"><font color="red">please obtain a valid
proof of purchase from the customer before proceeding with this
form. </font></td>
</tr>
<tr>
<td colspan="3"><hr width="100%"></td>
</tr>
<!-- <tr style="visibility: hidden;">
<td>
<span key="label.status" ></span>
</td>
<td class="inputFormCell">
<span jwcid="statusList" ></span>
</td>
</tr> -->
<tr style="visibility: hidden;">
<td>Status Date</td>
<td class="inputFormCell"><input type="text" name="statusDate1"
value="" title="dd MMM yyyy" id="statusDate1"> <a
href="javascript:calendar_statusDate1.toggle(document.mainForm.statusDate1);"><img
src="/eClaims/app?digest=d1154f8b7bf653ba6128f8cb1f5c8e95&path=%2Forg%2Fapache%2Ftapestry%2Fform%2FDatePickerIcon.png&service=asset"
border="0"></a></td>
</tr>
<tr>
<td>Call Date<font color="red"> *</font>
</td>
<td class="inputFormCell"><input type="text" name="callDate"
value="" title="dd MMM yyyy" id="callDate"> <a
href="javascript:calendar_callDate.toggle(document.mainForm.callDate);"><img
src="/eClaims/app?digest=d1154f8b7bf653ba6128f8cb1f5c8e95&path=%2Forg%2Fapache%2Ftapestry%2Fform%2FDatePickerIcon.png&service=asset"
border="0"></a></td>
</tr>
<tr>
<td>Country<font color="red"> *</font>
</td>
<td class="inputFormCell"><select name="countryList"
id="countryList" style="width: 180px;"
onchange="javascript:onChangeCountry(this);">
<option value="">--please select--</option>
<option value="AF">Afghanistan</option>
<option value="AS">American Samoa</option>
<option value="AU" selected="selected">Australia</option>
<option value="BD">Bangladesh</option>
<option value="WF">Wallis And Futuna</option>
<option value="WS">Samoa</option>
</select></td>
</tr>
<tr>
<td>Language<font color="red"> *</font>
</td>
<td class="inputFormCell"><select name="languageList"
id="languageList" style="width: 180px;">
<option value="" selected="selected">--please select--</option>
<option value="EN">English</option>
</select></td>
</tr>
<tr>
<td>Customer Email<font color="red"> *</font><font color="red">
*</font>
</td>
<td class="inputFormCell"><input type="text"
name="customerEmail" value="" id="customerEmail"></td>
</tr>
<tr>
<td colspan="3">**Fax Number mandatory for 'Save & Fax',
e-Mail mandatory for 'Save & Mail'</td>
</tr>
<tr>
<td class="section_content"><input type="submit"
name="Submit_6" value="[BUTTON.SUBMIT1]" id="submitDummy"
class="primButton" style="visibility: hidden;"></td>
<td class="section_content"><input type="submit"
name="Submit_7" value="[BUTTON.SUBMIT2]" id="submitAuth"
class="primButton" style="visibility: hidden;"></td>
</tr>
<tr>
<td class="section_content"><input type="submit"
name="Submit_8" value="[BUTTON.SUBMIT2]" id="submitMailAuth"
class="primButton" style="visibility: hidden;"></td>
</tr>
</tbody>
</table>
</form>
I have tried the following solutions,
new WebDriverWait(driver, 500)
.ignoring(StaleElementReferenceException.class)
.until(new Predicate<WebDriver>() {
public boolean apply(#Nullable WebDriver driver) {
Select selectLanguage;
try {
selectLanguage = new Select(getWebElement("apj.newdoa.language"));
selectLanguage.selectByValue("EN");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return true;
}
});
2nd Solution,
Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
.withTimeout( 120, TimeUnit.SECONDS )
.pollingEvery( 20, TimeUnit.SECONDS )
.ignoring( NoSuchElementException.class, StaleElementReferenceException.class );
// using a customized expected condition
Select foo1 = wait.until(new Function<WebDriver, Select>() {
Select selectLanguage;
public Select apply(WebDriver driver) {
try {
selectLanguage = new Select(getWebElement("apj.newdoa.language"));
logger.info("Value of Option:\t" +selectLanguage.toString());
return selectLanguage = new Select(getWebElement("apj.newdoa.language"));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return selectLanguage;
}
});
foo1.selectByValue("EN");
Thanks in advance
I have searched everywhere but cannot find an answer for this particular question that I have.
I'm making a pizza ordering website and instead of having a simple drop-down option for the time of pick-up or delivery field, we are required to have a text field so that the customer can manually enter the time themselves. I then need to validate the value of time by using DATE object to make sure it is between 6am and 11pm. Time must include am or pm.
Here is what I have so far:
<html>
<head>
<title>
Pizza Form
</title>
</head>
<body>
<script>
//Creating the function to extract the time
function getTime() {
var d = new Date();
d.setHours();
document.getElementById("pickTime").innerHTML = d;
}
}
</script>
<h1>Pizza Order Form</h1>
<form>
<fieldset><Legend>Is this for delivery or carryout?</legend>
<table >
<tr>
<td><input type="radio" name="DoC" id="forDelivery">Delivery <font color="red" size="1.px">extra 30% of total</font></input></td>
<td><input type="radio"name="DoC" id="forCarry">Carryout</td>
</tr>
<tr>
<td>Delivery/Pickup Time</td>
<td><input type="text" id="pickTime" value= "" onkeypress="return getTime()"> <font color="red" size="1.px" >Time should be between 6am and 11pm</font></td>
</tr>
</table>
</fieldset>
<fieldset><legend>Customer Info</legend>
<table >
<tr>
<td>First and Last Name</td>
<td><input type="text" id="flname"></td>
</tr>
<tr>
<td align="left">Address<br/ ><font color="red" size="1.px" id="address">Not required if takeout</font></td>
<td><textarea rows="4" cols="50" id="address"></textarea></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" id="phonenumber"></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" id="email"></td>
</tr>
</table>
</fieldset>
<fieldset><legend>Choose Size and Crust</legend>
<table style="width:100%" >
<tr>
<th align="left">Hand Tossed</th>
<th align="left">Handmade Pan</th>
<th align="left">Crunchy Thin crust</th>
<th align="left">Brooklyn Style</th>
</tr>
<tr>
<td><input type="radio"name="type" id="SHT" value="8">Small (10"-$8)</td>
<td><input type="radio"name="type" id="MHP" value"10">Medium (12"-$10)</td>
<td><input type="radio"name="type" id="MCTC" value="10">Medium (12"-$10)</td>
<td><input type="radio"name="type" id="LBS" value="13">Large (14"-13$)</td>
</tr>
<tr>
<td><input type="radio"name="type" id="MHT" value="9">Medium (12"-$9)</td>
<td></td>
<td><input type="radio"name="type" id="LCTC" value="12">Large (14"-$12)</td>
<td><input type="radio"name="type" id="XLBS" value="15">X-Large (16"-$15)</td>
</tr>
<tr>
<td><input type="radio"name="type" id="LHT" value="10">Large (14"-$10)</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="radio"name="type" id="XLHT" value="11">X-Large (16"-$11)</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</fieldset>
<fieldset><legend> Choose Cheese & Sauce</legend>
<table >
<tr>
<td width="58%">Cheese?</td>
<td>Sauce?</td>
</tr>
<tr>
<td>
<select size="6">
<option id="nocheese" value="0">No Cheese</option>
<option id="lightcheese" value="1">Light - $1.00</option>
<option id="normalcheese" value="1.25">Normal - $1.25</option>
<option id="extracheese" value="1.5">Extra - $1.50</option>
<option id="dblcheese" value="1.75">Double - $1.75</option>
<option id="tplcheese" value="2">Triple - $2.00</option>
</select>
</td>
<td valign="top">
<select size="4">
<option id="nosauce" value="0">No Sauce</option>
<option id="lightsauce" value="0.5">Light - $0.50</option>
<option id="normalsauce" value="1">Normal - $1.00</option>
<option id="extrasauce" value="1.5">Extra - $1.50</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset><legend> Toppings (You can choose more than one - $2 each)</legend>
<table >
<tr>
<td width="50%"
><input type="checkbox" id="pepporoni" value="2">Pepporoni</td>
<td><input type="checkbox" id="blackolive" value="2">Black Olives</td>
</tr>
<tr>
<td><input type="checkbox" id="mushroom" value="2">Mushrooms</td>
<td><input type="checkbox" id="greenpepper" value="2">Green Peppers</td>
</tr>
<tr>
<td><input type="checkbox" id="onions" value="2">Onions</td>
<td><input type="checkbox">Pineapple</td>
</tr>
<tr>
<td><input type="checkbox" id="sausage" value="2">Sausage</td>
<td><input type="checkbox" id="spinach" value="2">Spinach</td>
</tr>
<tr>
<td><input type="checkbox" id="bacon" value="2">Bacon</td>
</table>
</fieldset>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
Here's what the website looks like so far
If you are using HTML5 you can use a time input, like this:
<INPUT id="MyId" name="MyName" type="time">
More information on HTML5 input types.
If you are not using HTML5, you'll have to write a bit of script, or use one of many jquery time picker plugins available freely.
I have a form that submits just fine in FF, IE 8, IE 9, chrome.
In safari (windows), it submits but my model is empty. This behavior is only on my dev and prod site, not local development. Local development works normal. What am i doing wrong here?
Form:
<form action="/NetSite/Applications/ElectronicFileTransfer" id="TransfersSearchForm" method="post">
<table class="siteTable">
<tbody>
<tr>
<th style="width: 20%;">FICE</th>
<td style="width: 80%;"><input id="Criteria_Fice" maxlength="6" name="Criteria.Fice" size="6" type="text" value="" /></td>
</tr>
<tr>
<th>Source Email</th>
<td><input id="Criteria_SourceEmail" maxlength="40" name="Criteria.SourceEmail" size="25" type="text" value="" /></td>
</tr>
<tr>
<th>Target Email</th>
<td><input id="Criteria_TargetEmail" maxlength="100" name="Criteria.TargetEmail" size="25" type="text" value="" /></td>
</tr>
<tr>
<th>Upload From Date</th>
<td>
<input class="datePicker" data-val="true" data-val-date="Invalid date specified. Date should be like MM/DD/YYYY." id="Criteria_FromDate" maxlength="12" name="Criteria.FromDate" size="12" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Criteria.FromDate" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<th>Upload To Date</th>
<td>
<input class="datePicker" data-val="true" data-val-date="Invalid date specified. Date should be like MM/DD/YYYY." id="Criteria_ToDate" maxlength="12" name="Criteria.ToDate" size="12" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Criteria.ToDate" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<th class="empty"></th>
<td>
<button type="submit" title="Search" id="SubmitButton" class="gradientbutton gradientsmall gradientorange">Search</button>
<button type="button" title="Clear" id="ClearButton" class="gradientbutton gradientsmall gradientorange">Reset</button>
</td>
</tr>
</tbody>
</table>
</form>
JS submit method called by the event:
searchFormSubmit: function ($form, currentForm) {
if ($form.valid()) {
var $button = $("#" + FileTransferHome._enum.SubmitButton);
var $searchResults = $("#" + FileTransferHome._enum.SearchResultsDivId);
jMessage("Processing request...", $button, true, false);
$.ajax({
cache: false,
url: currentForm.action,
type: currentForm.method,
data: $form.serialize(),
error: function (xhr, ajaxOptions, thrownError) {
jMessageHide();
$searchResults.html(xhr.responseText).addClass(JSGlobalVars.MessageBoxError).fadeIn('slow');
},
success: function (result) {
jMessageHide();
$searchResults.removeClass(JSGlobalVars.MessageBoxError).html(result).fadeIn('slow');
location.hash = "SEARCHRESULTS";
}
});
}
}
Action:
I have an else block in there that i have put in just to test this case and it executes rather than the main block.
[HttpPost]
public ActionResult Index(ElectronicFileTransferHomeViewModel model)
{
... actions...
}
This in as internal app and behind windows login. Safari has a non issue with with windows authentication.
A work around that seems to be working for us (although not ideal) is to put Safari in Private browsing mode.
Below is example html, script and php to submit and reload two forms via jquery ajax. In the real application, the same forms will not be reloaded but a series of forms will be loaded after each is submitted.
In chrome, IE and safari; clicking submit results in the intended ajax request. The server responds as intended. Results (showing post variables for conformation) and new forms are loaded into the page as intended. Those new forms can then be submitted and all is good.
In firefox; everything works as intended until you try to submit the forms that were loaded via ajax. They will not submit. The original forms do work. It is only the ones added via ajax that don't submit.
I am guessing that this is an "event delegation" issue with the way firefox updates the DOM after the ajax. I have read the documentation at http://api.jquery.com/on/ and other places but I am at a loss...
Any help or suggestions would be greatly appreciated! My goal is to get this functional in the latest versions of chrome, IE, safari and firefox.
html page with script
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Ajax Form Submit</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="results"></div>
<div id="forms">
<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form>
<tr>
<td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
<td class=""colspan="3"><h1>Form 1</h1></td>
</tr>
<tr>
<td>Input 1A</td><td colspan="2"><input type="text" name="1A" /></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" name="1B" value="Form 1 was submitted" /></td>
</tr>
<tr>
<td colspan="3"><button type="submit" >Click Me!</button><input type="submit" value="Submit Form 1" /></td>
</tr>
</form>
</table>
</div>
<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form>
<tr>
<td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
<td class=""colspan="3"><h1>Form 2</h1></td>
</tr>
<tr>
<td>Input 2A</td><td colspan="2"><input type="text" name="2A" /></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" name="2B" value="Form 2 was submitted" /></td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Submit Form 2" /></td>
</tr>
</form>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#forms").on("submit", "form", function(e) {
e.preventDefault();
$.ajax({
url: "testAjax.php",
type: "POST",
cache: false,
data: $(this).serializeArray(),
success: function(jsonData) {
htmlData = jQuery.parseJSON(jsonData);
$.each(htmlData, function(id, data){
$("#"+id).html(data);
});
},
error: function(jqXHR, textStatus, errorThrown){
$("#results").html("<p>Somthing went wrong!</p>");
}
});
});
});
</script>
</body>
</html>
testAjax.php
<?php
$htmlOutput['forms'] =
'<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form id="login" method="post" enctype="multipart/form-data" target="_self" action="_self">
<tr>
<td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
<td class=""colspan="3"><h1>Form 1</h1></td>
</tr>
<tr>
<td>Input 1A</td><td colspan="2"><input type="text" name="1A" /></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" name="1B" value="Form 1 was submitted" /></td>
</tr>
<tr>
<td colspan="3"><button type="submit" >Click Me!</button><input type="submit" value="Submit Form 1" /></td>
</tr>
</form>
</table>
</div>
<div>
<table width="100%" cellspacing="0" cellpadding="0" class="ui-widget">
<form>
<tr>
<td width="100"></td><td width="300"></td><td></td>
</tr>
<tr>
<td class=""colspan="3"><h1>Form 2</h1></td>
</tr>
<tr>
<td>Input 2A</td><td colspan="2"><input type="text" name="2A" /></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" name="2B" value="Form 2 was submitted" /></td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Submit Form 2" /></td>
</tr>
</form>
</table>
</div>';
$htmlOutput['results'] =
'<p>Form 1:<br> 1A = ' . $_POST['1A'] . '<br>1B = ' . $_POST['1B'] . '</p>' .
'<p>Form 2:<br> 2A = ' . $_POST['2A'] . '<br>2B = ' . $_POST['2B'] . '</p>';
echo json_encode($htmlOutput);
?>
Open Firebug DOM inspector and verify that your form indeed loaded. I am pretty sure you are not allowed to nest form element directly under table element, and FF is likely simply dropping it.
In general issues like this one are always due to broken HTML. Verify that your HTML is correct. Verify that loaded DOM is what you expect it to be.
Here is how your HTML is being parsed. As expected form has been mangled.