Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    331
    Thanks
    38
    Thanked 0 Times in 0 Posts

    Unhappy JQuery Text Field Validation HELP URGENT!

    Greeting world! I have a problem in JQuery when validating a text field to alert the user that he or she cannot type less than 20 characters. Here are my codes:

    JQuery:

    <script type="text/javascript">
    $(document).ready (function () {
    $('#form').hide();
    $('#imageclick img').click(function () {
    $('#form').slideToggle('slow');
    $('.fullname').focus();
    var fullname = $('.fullname').val();
    var emailaddress= $('.emailfield').val();
    var comments = $('.messagetext').val();
    $('.sendmessage').click(function () {
    if ((fullname =='') || (emailaddress =='') || (comments =='')){
    alert ("Please, all fields are required, make sure you have not missed any of them, thank you!");
    return false;
    } else if
    ((fullname.length < 20) || (comments.length < 20)) {
    alert ("A minimum of 20 chracters must be entered in both the name and message fields to send the message!");
    return false;
    } else {
    return true;
    }
    });
    });
    });
    </script>

    HTML:

    <div id="form">
    <form action="#" method="post" class="formcontact">
    <p>Enter your full name (Required):</p>
    <p><input type="text" size="35" name="name" class="fullname"/></p>
    <p>Enter your email address (Required):</p>
    <p><input type="text" size="35" name="email" class="emailfield"/></p>
    <p class="ee"></p>
    <p>Enter your message (Required):</p>
    <p><textarea name="comments" cols="50" rows="10" class="messagetext"></textarea></p>
    <input type="submit" value="Send" name="submit" class="sendmessage"/>
    <input type="reset" value="Reset" name="Reset" class="resetall"/>
    </form>
    </div>
    <br/>
    <div id="imageclick">
    <img src="images/contact.png" width="190" height="80" alt="contact" />
    </div>


    As you have noticed above, when I click on an image the form will be toggle then the user will fill the form. I have successfully made a validation where if all the fields are empty, an alert will be displayed, however, when I make the validation for the FULLNAME and TEXTAREA fields to tell the user to not insert less than 20 characters, the validation is not working. Can you help me?

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    148
    Thanks
    0
    Thanked 20 Times in 20 Posts
    The error is that you get the form fields when the image is clicked, so, the fields not completed.
    But you must get the fields when the button is clicked.
    Try this:
    Code:
    <script type="text/javascript">
    $(document).ready (function () {
    $('#form').hide();
    $('#imageclick img').click(function () {
    $('#form').slideToggle('slow');
    $('.fullname').focus();
    $('.sendmessage').click(function () {
    var fullname = $('.fullname').val();
    var emailaddress= $('.emailfield').val();
    var comments = $('.messagetext').val();
    if ((fullname =='') || (emailaddress =='') || (comments =='')){
    alert ("Please, all fields are required, make sure you have not missed any of them, thank you!");
    return false;
    } else if
    ((fullname.length < 20) || (comments.length < 20)) {
    alert ("A minimum of 20 chracters must be entered in both the name and message fields to send the message!");
    return false;
    } else {
    return true;
    }
    });
    });
    });
    </script>

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    331
    Thanks
    38
    Thanked 0 Times in 0 Posts
    Hello, I have successfully did it. By the way, I want to know how to validate a textbox with JQuery. I want a textbox with the class ".fullname" to contain ONLY characters NOT numbers. Can you help me?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •