I want to do the validation to four text box using JQuery
Coding i have done
<table align="center" id="tbl-employee">
<tr>
<td>
<label>Insert Employee Details</label>
</td>
</tr>
<tr>
<td>
<label id="lbl-name">Name</label>
</td>
<td>:</td>
<td>
<input type="text" id="txt-name" />
</td>
</tr>
<tr>
<td>
<label id="lbl-salary">Salary</label>
</td>
<td>:</td>
<td><input type="text" id="txt-salary" /></td>
</tr>
<tr>
<td>
<label id="lbl-deptid">DeptId</label>
</td>
<td>:</td>
<td><select id="ddl-deptid">
<option value="0">-SelectOne-</option>
<option value="1">SoftWare</option>
<option value="2">CA</option>
<option value="3">Professor</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" id="btn-insert" value="Insert" /></td>
</tr>
</table>
}
JavaScript code
$(function () {
$("#btn-insert").click(function () {
$("#tbl-employee").validate({
rules: {
Name: { required: true, minlenth: 50 },
Salary:{required:true,minlength:9},
DeptId:"required"
},
message: {
Name:{required:"Please Enter Name",minlength:"Your Name must lessthan 50 characters" }
},
submit Handler: function (table) {
table.submit();
}
});
})
})
Will anyone check my program,If i am not giving any text to the input text box ,while submitting it should display the error message.
.validate() function of jquery validation is applied for form id not for table id.
You are given .validate() to table id
The validate plugin requires ID of the form to be validated unlike the id of the table you are using now tbl-employee. Wrap your HTML inside a form and the id of this form to validate.
$("#id_of_your_form").validate({..
Also, you are not having required attribute for the input textbox. Add it to the desired textboxes and the validations will work.
Eg. <input type="text" id="txt-name" required/>
Related
I have designed a form according to our given assignment. But the following error message is shown:
App Table Design is not correct:
NoSuchElementError: no such element: Unable to locate element: {"method":"xpath","selector":"//body/table/tbody/tr[1]/td[1]"}
The assignment is as follows (Design a Web page for customers for renting the page).
<!DOCTYPE html>
<html>
<body>
<h2><span style="background-color:#000080; color:#ff6600">Rent Toys</span></h2>
<form>
<table>
<tbody>
<tr>
<td><label for="tname">Toy name:</label></td>
<td>
<select id="tname" name="tname">
<option value="Bicycle">Bicycle</option>
<option value="Train">Train</option>
<option value="Doll">Doll</option>
<option value="Teddy Bear">Teddy Bear</option>
<option value="Kite">5</option>
<option value="Airplane">Airplane</option>
<option value="Model Car">Model Car</option>
<option value="Art Farm">Art Farm</option>
<option value=" Lego Mind storms"> Lego Mind storms</option>
<option value="Speak and Spell">Speak and Spell</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="ttype">Customer Name:</label>
</td>
<td>
<input type="text" id="ttype" name="ttype" pattern="[A-Za-z]{5,}" onblur="blurFunction()">
</td>
</tr>
<tr>
<td>
<label for="ttype">Rent Start Date</label>
</td>
<td>
<input type="date" id="Rdate" name="Rdate" >
</td>
</tr>
<tr>
<td>
<label for="minage">Rent Tenure</label>
</td>
<td>
<input type="text" id="RTdate" name="RTdate" pattern="[0-9]">
</td>
</tr>
<tr>
<td>
<label for="maxage">Number of Toys available</label></td>
<td>
<input type="text" id="RTdate" name="RTdate" pattern="[0-9]">
</td>
</tr>
<tr>
<td>
<label for="price">Enter Number of Toys</label>
</td>
<td>
<input type="text" id="quant" name="quant" >
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit Query" onclick="calculate()">
</td>
</tr>
</tbody>
</table>
</form>
<script>
// No focus = Changes the background color of input to red
function blurFunction() {
document.getElementById("ttype").style.background = "red";
}
function calculate(){
var costperday=100;
var qty=document.getElementById('quant').value;
var rtdate=document.getElementById('RTdate').value;
var show=qty*rtdate*costperday;
confirm(show);
confirm("Thank you for order Mr/Ms/Mrs:"+document.getElementById('ttype').value);
}
</script>
</body>
</html>
Change your code so you pass the DOM element to the function
HTML
<input type="text" id="ttype" name="ttype" pattern="[A-Za-z]{5,}" onblur="blurFunction(this)">
Javascript
function blurFunction(e) {
e.style.background = "red";
}
This looks like error from Selenium(probably). It is looking for xpath: //body/table/tbody/tr[1]/td[1]
but in your code table is wrapped inside of form element so xpath should look something like this: //body/form/table/tbody/tr[1]/td[1]
Change xpath or change your page structure in order to match required path
use theadas a table heading.<label for="tname">Toy name:</label> all headings add in thead
<thead>
<tr>
<th scope="col"><label for="tname">Toy name:</label></th>
</tr>
Well after a lot of research I found out the solution (might not be general i.e for every one) that removal of tag makes the code acceptable for the compiler..... Thank You
Show attribute 'Title' of elements (input type text, Select and Checkbox), on focus or click, in other element e.g.Label.
Pls see attached image link.
Thanks
one of the possible solutions JSFiddle:
$(document).on('mouseenter', 'input,select', function (e) {
$('#current-control-label').text($(this).data().title);
});
$(document).on('mouseleave', 'input,select', function (e) {
$('#current-control-label').text(' ');
});
html:
<table>
<tr>
<td><input type="text" data-title="Name" /></td>
<td>
<select data-title="Gender">
<option value="M">Male</option>
<option value="M">Female</option>
</select>
</td>
<td><input type="radio" data-title="Active" /></td>
</tr>
<tr>
<td colspan="2">
<span id="current-control-label"> </span>
</td>
</tr>
</table>
var data = $("#myform").serialize();
console.log(data);
<form method="post" id="myform" action="">
<table>
<tr>
<td>
<input type=text name="fname"/>
</td>
</tr>
<tr>
<td>
<input type=text name="lname"/>
</td>
</tr>
<tr>
<td>
<input type=text name="age"/>
</td>
</tr>
</table>
</form>
I was able to serialized this form using input text and using the code above my question is, Is it possible to serialize using td only if yes any idea?my form using the is like this
<form method="post" id="myform" action="">
<table>
<tr>
<td name="fname" id="fname">
</td>
</tr>
<tr>
<td name="lname" id="lname">
</td>
</tr>
<tr>
<td name="age" id="age">
</td>
</tr>
</table>
</form>
You will need to collect data yourself and then parameterize it:
var data = $.param($('td').map(function() {
return {
name: $(this).attr('name'),
value: $(this).text().trim()
};
}));
Check the demo below.
var data = $.param($('td').map(function() {
return {
name: $(this).attr('name'),
value: $(this).text().trim()
};
}));
alert(data)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td name="fname" id="fname">First Name</td>
</tr>
<tr>
<td name="lname" id="lname">Last Name</td>
</tr>
<tr>
<td name="age" id="age">23</td>
</tr>
</table>
No. You can not use serialization for table td.
It will work only for input controls. If you want to post td data then create your own java script object, collect td texts & post it to server.
I am trying to:
1. Hide and display fields based on SELECT a field
2. Populate a field based on check boxes
However neither is working. Both were based on working solutions from others. The only difference I can think of is that I am using TABLE to format them. But I don't know if that makes a difference.
The HTML code:
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td><select id="business" name="business" >
<option value="1">Sell</option>
<option value="2">Buy</option>
<option value="3">Both</option>
<option value="4">Trade</option>
<option value="5">Freight</option>
<option value="6">Customs</option>
</select>
</td>
</tr>
<div id="freight">
<tr>
<td><b>Service Type:</b></td>
<td><select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b></td>
<td><input type="text" name="tollfree" />
</td>
</tr>
</div>
<tr>
<td valign="top"><b>Your Email Address:</b></td>
<td><input type="text" name="email" /></td>
</tr>
<div id="customs">
<tr>
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder<br />
</td>
</tr>
</div>
<tr>
<td><b>Products/Services:</b></td>
<td><input type="text" name="products" /></td>
</tr>
<div id="brand">
<tr>
<td><b>Brand Names:</b></td>
<td><input type="text" name="brands" /></td>
</tr>
</div>
</table>
</form>
The jQuery code for doing these:
$(':checkbox').click(function() {
$('input[name=products]').val(
$(':checkbox:checked').map(function() {
return $(this).val();
}).get().join(',')
);
});
$(document).ready(function () {
toggleFields();
$("#business").change(function () {
toggleFields();
});
});
function toggleFields() {
if ($("#business").val() == 1 || ($("#business").val() == 2 || ($("#business").val() == 3)
$("#brand").show();
$("#freight").hide();
$("#customs").hide();
else
if ($("#business").val() == 5)
$("#brand").hide();
$("#freight").show();
$("#customs").show();
else
if ($("#business").val() == 6)
$("#brand").hide();
$("#freight").hide();
$("#customs").show();
else
$("#brand").hide();
$("#freight").hide();
$("#customs").hide();
}
For example when you select "Sell", "Buy" or "Both" (in Business), the SERVICE TYPE and TOLLFREE NUMBER fields are supposed to be hidden, as well as SERVICES field. They are wrapped in DIV id "freight" and "customs" and supposed to be invisible. But they are not. All fields are shown regardless.
Second problem is if you select Customs (in Business) the Services field which is composed of checkboxes is supposed to be shown and when click on the check boxes, the value in these checkboxes is supposed to populate the Products/Services field. It is not doing that either.
Here is the jsfiddle for this code:
http://jsfiddle.net/5SArB/571/
which is based on the working version of both
jsfiddle.net/5SArB/ (toggle fields based on form values)
and
jsfiddle.net/dTrVt/ (populate input field based on checkbox id values)
I am pulling my hair on this and just can't understand why it is not working. Any help is appreciated. Thank you in advance.
There are several issues with the code, the first of which is that the javascript is poorly formed.
You can't write if statements without curly braces if they take more than one line
The first if statement in toggleFields is missing some parentheses
Once you get that fixed, the other problem concerns the formation of your html table. Don't wrap the table rows with divs, since that's improper html table structure. Instead, you might take out the divs, and assign the "id"s to the table rows instead. Essentially what you would be doing then is showing/hiding table rows rather than showing/hiding divs containing the table rows.
The resulting HTML would be then:
<tr id="freight">
...
</tr>
Rather than:
<div id="freight">
<tr>
...
</tr>
</div>
Here's a fiddle with the proposed changes.
Hope that helps!
Edit: In case somebody comes across this in the future, the problem was a simple issue with load order -- the document wasn't ready when the click event was bound. The solution is as simple as moving the click event inside the document.ready callback.
As already mentioned, you have syntax errors and you can't have div as a child of table.
In the if...else if statements you are missing the block definitions...
Also assign the ids to the tr instead of nesting it in a div.
Also the code can be simplified as
$(':checkbox').click(function () {
$('input[name=products]').val($(':checkbox:checked').map(function () {
return $(this).val();
}).get().join(','));
});
jQuery(function ($) {
$("#business").change(toggleFields).change();
});
function toggleFields() {
var el = $('#business option:selected').data('el'),
els = el ? '#'+el.split(/,\s*/).join(', #'):'';
var $els =els? $(els).show():$();
$('.bussiness-field').not($els).hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td>
<select id="business" name="business">
<option value="1" data-el="brand">Sell</option>
<option value="2" data-el="brand">Buy</option>
<option value="3" data-el="brand">Both</option>
<option value="4">Trade</option>
<option value="5" data-el="freight, customs">Freight</option>
<option value="6" data-el="customs">Customs</option>
</select>
</td>
</tr>
<tr id="freight" class="bussiness-field">
<td><b>Service Type:</b>
</td>
<td>
<select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b>
</td>
<td>
<input type="text" name="tollfree" />
</td>
</tr>
<tr>
<td valign="top"><b>Your Email Address:</b>
</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr id="customs" class="bussiness-field">
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent
<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder
<br />
</td>
</tr>
<tr>
<td><b>Products/Services:</b>
</td>
<td>
<input type="text" name="products" size="40" />
</td>
</tr>
<tr id="brand" class="bussiness-field">
<td><b>Brand Names:</b>
</td>
<td>
<input type="text" name="brands" />
</td>
</tr>
</table>
</form>
I have search lot of about this but haven't found any solution. I want to validate multiple array named file inputs and dropdowns in JQuery validate.
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
I have added JQuery Validate Code like this:
$("#formname").validate(
{
rules:{
times:{required:true, digits:true}
}}
);
But its only validating first input and showing error message there only whether 2nd or 3rd input field entered or not.
I don't want to change this "times[]" name because functionality is depending on this. Only I want validation using JQuery validate.
Is there any trick available for this?
Any help would be appreciated.
Thanks
The plugin doesn't handle fields with the same name well. Here's how I solved it in my application.
I gave all the repetitive fields distinct names, and put the validation method names in the class.
<td> <input type="text" class="times required digits" name="times[0]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[1]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[2]" /> </td>
</tr>
You can remove the indexes before submitting with code like this:
$("#formname").validate({
...
submitHandler: function(form) {
$(form).find(":input[name*='[']").each(function() {
this.name = this.name.replace(/\[\d+\]/, '[]');
}
form.submit();
}
});