multiple custom error message support per field by using parsley.js

问题

I am trying to validate a simple form using parsley.js and I am very beginner on parsley.js.I would like to show multiple error messages in one custom validation method using window.ParsleyValidator.addValidator() method.So I have tried out in my way.

Simple html form I have created

<html>
	<head>Custom Validation Parsley
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script src="js/parsley.min.js"></script>
		<script src="js/my-validator-parsley.js"></script>
		
	</head>
	<body>
		<form class="cmxform" id="commentForm" method="get" action="">
		  <fieldset>
		    <legend>Please provide your name, email address (won't be published) and a comment</legend>
		   
		    <p>
		      <label for="cemail">E-Mail with custom method (required)</label>
		      <input id="cemail" name="checkEmail" data-parsley-checkEmail>
		    </p>
		   
		   
		    <p>
		      <input class="submit" type="submit" value="Submit">
		    </p>
		  </fieldset>
		</form>
		<script>
		$("#commentForm").parsley();
		</script>
	</body>
</html>

And the javascript file that is included the custom validation method

var errorMsg = "";
window.ParsleyValidator.addValidator('checkEmail', function(value) {
    console.log(value);
    if (value == "") {

      errorMsg = "this field must not be empty";

      return false;
    } else {
      var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

      if (!regex.test(value)) {

        errorMsg = "this field must be email ***";
        

      }
      return regex.test(value);
      window.ParsleyValidator.addMessage('en', 'checkEmail',
        errorMsg);
    }

  }, 32)
  //.addMessage('en','checkEmail',window.ParsleyValidator.catalog)
;

But It's not working for me.Can anyone give me advice on this and how to approach this task?

回答1:

You can only assign one message per constraint in a given locale.

From http://parsleyjs.org/doc/annotated-source/validator.html:

addMessage: function (locale, name, message) {
  if ('undefined' === typeof this.catalog[locale])
    this.catalog[locale] = {};

  this.catalog[locale][name.toLowerCase()] = message;

  return this;
},

Thus if you want multiple messages, define multiple validators.

Also,

if you want a field to be required there's no need to check if it's empty; just add required attribute to it (e.g. <input ... required />)
Parsley is bundled with common validators (http://parsleyjs.org/doc/index.html#validators) and "email" is one of them; to enable it add attribute type="email" to your input (e.g. <input type="email" required />)

UPDATE:

From http://parsleyjs.org/doc/index.html#psly-ui-for-javascript:

window.ParsleyUI.updateError(parsleyInstance, name, message);
Manually edit an error message.

Also, you can set the message from your validator function by directly assigning it to the catalog instead of using addMessage()(note that the name of the validator should be all lowercase):

window.ParsleyValidator.addValidator('checkEmail', function(value) {

    if (...)
        window.ParsleyValidator.catalog.en.checkemail = 'Some error message AAA';
    else
        window.ParsleyValidator.catalog.en.checkemail = 'Some error message BBB';

    return (...);

}, 32);

来源：https://stackoverflow.com/questions/30155021/multiple-custom-error-message-support-per-field-by-using-parsley-js

标签

javascript

jquery

parsley.js