Thread: Form validation

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0

    Form validation


    Hi guys! I have a form which when the anchor is clicked it will make the current fieldset invisible and the next fieldset will be visible, it changes fieldset using the id. the anchor looks like this -

    Code:
    <a href="#" id="step2" class="button-link next-link next_roll">Next</a>

    Now what i want to do is validate each fieldset, for example if the following code doesn't have any text it wont go to the next fieldset -
    Code:
    <input id="colour" class="inputrequired" type="text" placeholder="E.g. red, blue, yellow..." />
    There is a few ways in which i think i could validate the form -
    1) the button is invisible until the input contains text.
    2) if the input doesn't contain text the id="notext" and if the input has text the id="step2"

    I'm currently using this code which hides the button, but it only works with the first requiredinput class?

    Code:
    $(".requiredinput").keyup(function () {
           if ($(this).val()) {
              $("#step2").show();
               $("#holderbutton").hide();
           }
           else {
              $("#step2").hide();
              $("#holderbutton").show();
           }
        });
    Is there a better way of doing this or how do i get the hide button code working?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    You have two different class names; in your input field..., your class was "inputrequired" and in your jQuery DOM Element..., your class was "requiredinput" (you just have them flip-flopped). That's the reason your having problems getting it to work. Give the input field and the jQuery DOM Element..., the exact same className; then it should work fine.
    Code:
    <input id="colour" class="inputrequired" type="text" placeholder="E.g. red, blue, yellow..." />
    Code:
    $(".inputrequired").keyup(function() {
           if ($(this).val()) {
              $("#step2").show();
               $("#holderbutton").hide();
           }
           else {
              $("#step2").hide();
              $("#holderbutton").show();
           }
        });
    Actually..., after re-reading your post; I missed the "Next" link idea. So, to better accommodate, that idea, of yours; the code below, would be the way to go:
    Code:
    $("#step2").hide();
    $("#holderbutton").hide();
    
    $("#step2").click(function(e) {
      e.preventDefault();
      var color_len = $(".inputrequired").val().length;
           if (color_len == 0) {
               $("#step2").show();
               $("#holderbutton").hide();
           }
           else {
              $("#step2").hide();
              $("#holderbutton").show();
              // you also may want to hide "color" input field and create a new input field (for whatever you next data collection need is)... here; that would be a nice little form pagination effect
           }
        });
    
    $(".inputrequired").keyup(function(){
      var color_len = $(".inputrequired").val().length;
           if(color_len == 0){
               $("#step2").hide();
               $("#holderbutton").hide();
           }
           else if(color_len > 0){
               $("#step2").show();
           }
    });
    Last edited by web_loone08; July 7th, 2013 at 02:57 PM. Reason: Revised Code To Better Fit OP's Delima
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by web_loone08
    Actually..., after re-reading your post; I missed the "Next" link idea. So, to better accommodate, that idea, of yours; the code below, would be the way to go:
    Code:
    $("#step2").hide();
    $("#holderbutton").hide();
    
    $("#step2").click(function(e) {
      e.preventDefault();
      var color_len = $(".inputrequired").val().length;
           if (color_len == 0) {
               $("#step2").show();
               $("#holderbutton").hide();
           }
           else {
              $("#step2").hide();
              $("#holderbutton").show();
              // you also may want to hide "color" input field and create a new input field (for whatever you next data collection need is)... here; that would be a nice little form pagination effect
           }
        });
    
    $(".inputrequired").keyup(function(){
      var color_len = $(".inputrequired").val().length;
           if(color_len == 0){
               $("#step2").hide();
               $("#holderbutton").hide();
           }
           else if(color_len > 0){
               $("#step2").show();
           }
    });
    Hi, thanks for your reply!

    I've tested the code which you have sent and it's still is not working? You can view the code here - http://jsfiddle.net/lukem13/pcWev/4/

    What i'm trying to achieve is if all of the inputs that have the inputrequired class have no text then the step2 anchor will not show and the placeholder anchor will show. Currently step2 anchor will show even if the second input is empty?
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Originally Posted by luke13
    Hi, thanks for your reply!

    I've tested the code which you have sent and it's still is not working? You can view the code here - http://jsfiddle.net/lukem13/pcWev/4/

    What i'm trying to achieve is if all of the inputs that have the inputrequired class have no text then the step2 anchor will not show and the placeholder anchor will show. Currently step2 anchor will show even if the second input is empty?
    That's because you are trying to validate multiple input fields with the same className; you have to use the jQuery .each() API, to do this:
    Code:
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    
    <input id="colour" class="inputrequired" type="text" />
    <input id="colour1" class="inputrequired" type="text" />
    
    <a href="#" id="step2">Next</a>
    <a href="#" id="holderbutton">holder button</a>
    
    <script>
    
    $("#step2").hide();
    $("#holderbutton").hide();
    
    $("#step2").click(function(e) {
      e.preventDefault();
      $(".inputrequired").each(function(){
      var color_len = $(this).val().length;
           if (color_len == 0) {
               $("#step2").show();
               $("#holderbutton").hide();
           }
           else {
              $("#step2").hide();
              $("#holderbutton").show();
              // you also may want to hide "color" input field and create a new input field (for whatever you next data collection need is)... here; that would be a nice little form pagination effect
           }
    
        });
        });
    
    $(".inputrequired").keyup(function(){
      $(".inputrequired").each(function(){
       var color_len = $(this).val().length;
           if(color_len == 0){
               $("#step2").hide();
               $("#holderbutton").hide();
           }
           else if(color_len > 0){
               $("#step2").show();
           }
    
       });
    });
    
    </script>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by web_loone08
    That's because you are trying to validate multiple input fields with the same className; you have to use the jQuery .each() API, to do this:
    Code:
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    
    <input id="colour" class="inputrequired" type="text" />
    <input id="colour1" class="inputrequired" type="text" />
    
    <a href="#" id="step2">Next</a>
    <a href="#" id="holderbutton">holder button</a>
    
    <script>
    
    $("#step2").hide();
    $("#holderbutton").hide();
    
    $("#step2").click(function(e) {
      e.preventDefault();
      $(".inputrequired").each(function(){
      var color_len = $(this).val().length;
           if (color_len == 0) {
               $("#step2").show();
               $("#holderbutton").hide();
           }
           else {
              $("#step2").hide();
              $("#holderbutton").show();
              // you also may want to hide "color" input field and create a new input field (for whatever you next data collection need is)... here; that would be a nice little form pagination effect
           }
    
        });
        });
    
    $(".inputrequired").keyup(function(){
      $(".inputrequired").each(function(){
       var color_len = $(this).val().length;
           if(color_len == 0){
               $("#step2").hide();
               $("#holderbutton").hide();
           }
           else if(color_len > 0){
               $("#step2").show();
           }
    
       });
    });
    
    </script>
    Woohoo! I've been trying to figure this out for most of today, thank you very much!
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    The only downside to this; is that if end user skips to last input, with that className; then it will validate anyway. This is why you really should validate by a specific id or name, because they are unique attributes/identifiers; but..., here's the quick workaround for the issue described above:
    Code:
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    
    <input id="colour" class="inputrequired" type="text"/>
    <input id="colour1" class="inputrequired" type="text" disabled="disabled"/>
    
    <a href="#" id="step2">Next</a>
    <a href="#" id="holderbutton">holder button</a>
    
    <script>
    
    $("#step2").hide();
    $("#holderbutton").hide();
    
    $("#step2").click(function(e) {
      e.preventDefault();
      $(".inputrequired").each(function(){
      var color_len = $(this).val().length;
           if (color_len == 0) {
               $("#step2").show();
               $("#holderbutton").hide();
           }
           else {
              $("#step2").hide();
              $("#holderbutton").show();
              // you also may want to hide "color" input field and create a new input field (for whatever you next data collection need is)... here; that would be a nice little form pagination effect
           }
    
        });
        });
    
    $(".inputrequired").keyup(function(){
      $(".inputrequired").each(function(){
       var color_len = $(this).val().length;
           if(color_len == 0){
               $("#step2").hide();
               $("#holderbutton").hide();
               $(this).next("input").attr("disabled","disabled");
               $(this).next("input").val("");
           }
           else if(color_len > 0){
               $("#step2").show();
               $(this).next("input").removeAttr("disabled");
           }
    
       });
    });
    
    </script>
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by web_loone08
    This is why you really should validate by a specific id or name, because they are unique attributes/identifiers;
    I didn't even realise about the last input...

    Thanks for the new work around, although it may be best if i validate by a specific id like you suggested.

    How would I do something like this?
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    It would probably be a good idea, for you to learn about "JavaScript Form Validation". If you will do an online search, with those terms; then you should see several examples, about how you validate individual form elements.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by web_loone08
    It would probably be a good idea, for you to learn about "JavaScript Form Validation". If you will do an online search, with those terms; then you should see several examples, about how you validate individual form elements.
    Great thank you for the tip!

IMN logo majestic logo threadwatch logo seochat tools logo