I've a text field in table with id name . I have added a validation on it. But its not working
<td>Name:</td>
<td>
<input type="text" id="name" class="required"/>(required)
</td>
$("#name").focusout(function(){
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
I have complete code on jsfiddle . Please check link
Just make sure to put it inside document ready and it'll work just fine:
$(function () {
$("#name").focusout(function () {
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
});
Edit: full page requested by OP:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Book Library</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
var count = 1;
var rating;
function addRow() {
var myName = document.getElementById("name");
var auther = document.getElementById("auther");
var publish = document.getElementById("publish");
var ratings = document.getElementsByName("rating");
for (var i = 0; i < ratings.length; i++) {
if (ratings[i].checked) {
rating = ratings[i];
}
}
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = count;
row.insertCell(1).innerHTML = myName.value;
row.insertCell(2).innerHTML = auther.value;
row.insertCell(3).innerHTML = publish.value;
row.insertCell(4).innerHTML = rating.value;
count = count + 1;
}
function load() {
console.log("Page load finished");
}
$(function() {
$("#name").focusout(function () {
console.log('bla');
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
});
</script>
</head><body onload="load()">
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData" border="1" style="width:100%">
<tr id="templateRow">
<th>ID</th>
<th>Name</th>
<th>Authers</th>
<th>Published</th>
<th>Ratings</th>
</tr>
</table>
<br/>
</div>
<div id="myform">
<b>Simple form with name and age ...</b>
<table style="width:100%">
<tr>
<td>Name:</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>Auther:</td>
<td>
<input type="text" id="auther">
</td>
</tr>
<tr>
<td>Published:</td>
<td>
<input type="date" id="publish">
</td>
</tr>
<tr>
<td>Rating:</td>
<td>
<input type="radio" value="1" id="rating" name="rating">1
<input type="radio" value="2" id="rating2" name="rating">2
<input type="radio" value="3" id="rating3" name="rating">3
<input type="radio" value="4" id="rating4" name="rating">4
<input type="radio" value="5" id="rating5" name="rating">5</td>
</tr>
</table>
<br>
<input type="button" id="add" value="Add" onclick="Javascript:addRow()">
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> to my code its not working although its working on js filddle Can you please tell the issue ?