my simple jquery validation not working

Hey guys here is my code:

 <script>$('td#view-details').click(function() {
     var fg = $(this).closest('td').siblings(':first-child').text();     
     $('#'+fg+'confirm').click(function () {
         if($('form #' + fg + 'input[name=test]').val() == "") {
             $('#error_notification').fadeIn(100).delay(1000).fadeOut(100);
             return false;
         } else {
             $(main).text('show');
             $('#' + fg).addClass('details').removeClass('active');
             $('#success_notification').fadeIn(100).delay(1000).fadeOut(100);
         }
     });
</script>
<html>
    <table width="742" id="redemptions_landing_page" valign="top">
        <tr>
            <th>ID</th>
            <th>Investor Name</th>
            <th>Email</th>
            <th>Credit</th>
            <th>Request Amount</th>
            <th>Request Mode</th>
            <th>View</th>
        </tr>
        <tr>
            <td>1848719408</td>
            <td>arvind</td>
            <td>sureshpattu2002@gmail.com</td>
            <td>Rs 5000</td>
            <td>Rs 300</td>
            <td>Cheque</td>
            <td id="view-details">show</td>
        </tr>
    </table>
    <form  id="1848719408">
        <textarea cols="40" rows="10" id="remarks" placeholder="Remarks (enter courier number and courier service provider for confirmed redemptions, enter reason for rejected redemptions)"></textarea>
    <h3 class="bbrdt">Redemption Amount</h3>
    <input type="text" name="test" id="Amount_For_Investor" placeholder="Amount For Investor" />&nbsp;&nbsp;&nbsp;<input name="test" type="text" id="courier_charges" placeholder="Courier Charges"/>&nbsp;&nbsp;&nbsp;
<input value="Confirm" type="button" id="1848719408confirm" />
<button id="reject">Reject</button></form>

I want to validate the text fields but it's not working, the success notification is showing again when the text fields are empty, but the error notification is not displaying.

Answers


You should always wrap your code in the .ready function to ensure the DOM has loaded, like this

$(document).ready(function(){
    $('td#view-details').click(function() {
    var fg = $(this).closest('td').siblings(':first-child').text();
    $('#' + fg + 'confirm').click(function() {
        if ($('form #' + fg + 'input[name=test]').val() == "") {
            $('#error_notification').fadeIn(100).delay(1000).fadeOut(100);
            return false;
        }
        else {
            $(main).text('show');
            $('#' + fg).addClass('details').removeClass('active');
            $('#success_notification').fadeIn(100).delay(1000).fadeOut(100);
        }
    });
});

You are missing the document ready. At the moment you are binding the click event, the element does not yet exists.

Try this

<script>
    $(function(){
    // Your code go's here
    });
</script>

As Niels pointed out, you should wait for the document to be ready before starting anything, because you're trying to access some things that are not yet created.

You should try this instead:

<script>
   $(document).ready(function(){
     // Your code
   });
</script>

Need Your Help

Does circular references cause memory leaks in JavaScript?

javascript debugging browser memory-leaks cross-browser

I've read many claims stating that circular references will cause memory leaks:

Long-running code within asp.net process

.net asp.net

E.g. we this code in the asp.net form codebihind: