问题描述:

$('#contact-form').validate({

rules: {

fullname: {

minlength: 4,

required: true

},

username: {

required: true,

email: true

},

password: {

minlength: 8,

required: true

},

confirm_password: {

minlength: 8,

required: true,

equalTo: "#password"

},

mobile: {

minlength: 11,

maxlength: 11,

required: true,

number: true

}

},

highlight: function(element) {

$(element).closest('.control-group').removeClass('success').addClass('error');

},

success: function(element) {

element.text('OK!').addClass('valid')

.closest('.control-group').removeClass('error').addClass('success');

},

errorPlacement: function(error, element) {

error.insertAfter(element.parent());

}

});

$('#contact-form').on('keyup blur', function() {

if ($('#contact-form').valid()) {

$('button.btn').prop('disabled', false);

} else {

$('button.btn').prop('disabled', 'disabled');

}

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- for checking validation -->

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>

<body>

<div class="container">

<br>

<br>

<br>

<div class="col-md-3"></div>

<div class="col-md-6">

<form method="POST" class="form-horizontal" id="contact-form">

<div class="control-group">

<div class="controls">

<div class="input-group input-group-lg">

<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>

<input type="text" id="fullname" name="fullname" class="form-control" placeholder="Your name">

</div>

</div>

</div>

<p class="help-block"></p>

<br>

<br>

<div class="control-group">

<div class="controls">

<div class="input-group input-group-lg">

<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>

<input type="email" name="username" id="username-reg" class="form-control" placeholder="Your email address">

</div>

</div>

</div>

<p class="help-block"></p>

<br>

<br>

<div class="control-group">

<div class="controls">

<div class="input-group input-group-lg">

<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>

<input type="password" name="password" id="password" class="form-control" placeholder="Your password">

</div>

</div>

</div>

<p class="help-block"></p>

<br>

<br>

<div class="control-group">

<div class="controls">

<div class="input-group input-group-lg">

<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>

<input type="password" name="confirm_password" id="repass" class="form-control" placeholder="Confirm your Password">

</div>

</div>

</div>

<p class="help-block"></p>

<br>

<br>

<div class="control-group">

<div class="controls">

<div class="input-group input-group-lg">

<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>

<input type="text" name="mobile" id="phone" class="form-control" placeholder="Mobile Number">

</div>

</div>

</div>

<p class="help-block"></p>

<br>

<br>

<div class="control-group">

<button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Submit</button>

</div>

</form>

</div>

<div class="col-md-3"></div>

</div>

</body>

网友答案:

You have to implement CSS for success and error classes to set the text to green eg:

.success{
    color:green
}
网友答案:

use jQuery bootstrapvalidator:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
相关阅读:
Top