javascript - JQuery validations not working empty data is inserted into table rows -


i've text field in table id name . have added validation on it. not working

    <td>name:</td>     <td>         <input type="text" id="name" class="required"/>(required)     </td>      $("#name").focusout(function(){         if (!$(this).val()) {             alert("this field required");             $(this).focus();          }     });

i have complete code on jsfiddle . please check link

just make sure put inside document ready , it'll work fine:

$(function () {     $("#name").focusout(function () {         if (!$(this).val()) {             alert("this field required");             $(this).focus();         }     }); });

jsfiddle demo

edit: full page requested 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");     (var = 0; < 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 required");             $(this).focus();         }     }); }); </script>  </head><body onload="load()">     <div id="mydata"> <b>current data in 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>&nbsp;         <br/>     </div>     <div id="myform"> <b>simple form name , 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>

Comments

Post a Comment

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

i added new project. made mistake in projectname.conf file in sites-available apache2, led me reinstalling apache2. after reinstalling , re-enabling projects on every page of every project .. <body> run(); </body> .. i've run composer update, restarted service, restarted pc, checked config files, tried disabling new project. there nothing in error log, , access.log: 127.0.0.1 - - [15/may/2015:01:40:47 +0200] "get / http/1.1" 304 181 "-" "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:38.0) gecko/20100101 firefox/38.0" maybe i'm forgetting apache2 reinstall? don't think did different last time installed it. looks haven't setup php correctly. take @ this great guide , maybe you're forgetting link php config apache2.
Read more

php - How can I echo out this array? -

i don't know how go grabbing data in variable , put foreach loop. class tree{ private $info = array( array('name'=>'jim','state'=>'nu','company'=>'nu','phone'=>array('cell'=>'5615111111','office'=>'5611111111'),'email'=>array('primary'=>'exs@example.com','ex@there.com')), array('name'=>'joe smith','city'=>'phoenix','phone'=>'4805551111','email'=>'jsmith@some_email.com'), array('name'=>'john doe','city'=>'chandler','company'=>'doe co.','email'=>array('jdoe@gmail.com','personal'=>'email@email.com'),'phone'=>'6025550002') ); } if you're inside of class, can access private variable using $this->variablename . example, i...
Read more