Search code examples
jqueryformstwitter-bootstrapvalidationbootstrapvalidator

1000hz bootstrap-validator custom validation


I'm trying to use bootstrap validator and add a custom validator based on an if else statement, but it doesn't seem to be working. Maybe I'm confused as to how custom validation works, but my logs aren't even appearing in the console...

JS:

    $('#estimate').validator({

        custom: {
            'distance': function() { 
                if( $("#distance-group").hasClass("invalid")){
                    return false;
                    console.log("ERROR")
                }else{
                    return true;
                    console.log("NO ERROR")
                }
            }
        },
        errors: {
            'distance': "Nope"
        }
    })

HTML:

<input class="form-control" type="text" name="address2" id="address2" size="30" placeholder="Your Address" data-distance/>

Solution

  • I needed to put data-distance="true" on the input I wanted validated. The console.logs weren't showing up because I put them after the returns.

    See here: http://jsbin.com/nuwajejinu/edit?html,js,console,output

    $('#estimate').validator({
      custom: {
        'distance': function() { 
          if( $("#distance-group").hasClass("invalid")){
            console.log("ERROR")
            return false;
          }else{
            console.log("NO ERROR")
            return true;
          }
        }
      },
      errors: {
        'distance': "Nope"
      }
    })
    

    HTML:

    <input type="text" data-distance="true" id="distance-group" class="form-control" required>