Comments (2)
Hi Richard,
you should be looking into the prompt method. Here is an example that works well for me:
In the example below, I use data attributes to define the custom error message - specifically on the email field, but the same can be applied to all the fields, with the exception of the password field as I use a custom rule for that (see the javascript block below).
Markup:
<form id="formUser" role="form" action="/" method="POST">
<!-- First & Last names -->
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group form-group-default required">
<label>First name</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="User's first name" data-validate="required" required>
<span class="help-text colour-danger"> </span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-group-default required">
<label>Last name</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="User's last name" data-validate="required" required>
<span class="help-text colour-danger"> </span>
</div>
</div>
</div>
<!-- Email -->
<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-default">
<label>Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="User's email address." data-validate="email" data-error-message="Please enter a valid email address." required>
<span class="help-text colour-danger"> </span>
</div>
</div>
</div>
<!-- Password -->
<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-default">
<label>Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Minimum of 8 characters." data-validate="password" required>
<span class="help-text colour-danger"> </span>
</div>
</div>
</div>
</form>
Javascript:
// Add the custom rules for verifyjs
$.verify.addRules({
url: {
regex: /^https?:\/\/(\S+(\:\S*)?@)?((?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(\.([a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(\.([a-z\u00a1-\uffff]{2,}))(:\d{2,5})?(\/[^\s]*)?$/i,
message: "Invalid URL"
},
password: function(inputField) {
var val = inputField.val();
console.log('verify password', val);
if (val.length === 0) {
// too short
validPassword = false;
message = 'Your password cannot be empty. It must contain at least 1 letter and 1 number.';
} else if (val.length > 0 && val.length < 8) {
// too short
validPassword = false;
message = 'Your password must contain at least 8 characters.';
} else if (!val.match("[0-9]") || !val.match("[A-Za-z]")) {
//wrong characters
validPassword = false;
message = 'Your password must contain at least 1 letter and 1 number.';
} else {
// all good
validPassword = true;
}
if (!validPassword) {
return message;
}
return true;
}
});
$.verify({
// set the error class (bootstrap)
errorClass: 'has-error',
// set the error checking to be "live"
hideErrorOnChange: true,
// set the error container that I want to use - this is the element that the error class is add to and removed from
errorContainer: function(input) {
$inputContainer = input.parent();
return $inputContainer;
},
// this handles the element prompts
prompt: function(element, text) {
// do nothing if there is no validate data atrribute
if (!element.data('validate')) return;
// I am using a span with the class .help-text as the message, but this is just selecting an element to set the error message on, so change for your needs
if ($(element.parent('.input-group')).length < 1) {
$helpText = element.next('.help-text');
} else {
// we are inside an input group - we need to get out of it
$helpText = $(element.parent('.input-group')).next('.help-text');
}
// can't find a helpText element - just exit
if ($helpText.length < 0) return;
if (text) {
// this grabs the data attribute error-message from the element being checked or uses the default text for the validation rule
text = element.data('error-message') ? element.data('error-message') : text;
// this sets the text on the element we want to display the error message on
$helpText.html(text || ' ');
// this is setting a class that I use to display the help text / error message (.active) - I use css transitions to nicely transition the height of the element, but you could just as easily use javascript or display: none / display: block
if (text === '' || text === '&nbps;') {
$helpText.removeClass('active');
} else {
$helpText.addClass('active');
}
} else {
$helpText.html(' ');
// no error - let's clear the messages
$helpText.removeClass('active');
}
}
});
Hope that helps!
Cheers,
Matt
from verifyjs.
Hi! Thanks for this, I will look into it shortly 👍
from verifyjs.
Related Issues (20)
- verification success handler HOT 4
- Empty error message for "required" rule HOT 1
- it works, but hides the form?
- Validation deletes pressed button from the POST request HOT 1
- i18n
- How to make validation message appear next to "Submit" button? HOT 1
- Cannot use `$.verify.updateRules`
- Validate on select
- problem wiith angularjs on submit
- wrong rule name
- Is it possible to add conditional verification HOT 4
- Link for new issues is dead at http://verifyjs.com/#contributing
- Have a "debug" / "Troubleshooting" section of the documentation.
- Causes two submits
- The 'scroll' option is not working
- Website is down, unable to find docs. HOT 2
- Successor project HOT 1
- Add option for timeout value
- Verifyjs for react
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from verifyjs.