ParsleyJS custom validator not working

Question

I am using the latest version of ParsleyJS and tried the example from doc, just copy pasted it into my code but it wont work. I actually made my own validator but its not working, so I tried to copy paste the exact example but it doesn't work as well.

I am working with Laravel and here's my form and js code.

<div class="form-group">
<label>Name of my school</label>
{{ Form::text('edu[institute]', null, ['class' => 'form-control', 'data-parsley-myValidator' => '']) }}
</div>


window.Parsley.addValidator('myValidator', {
  validateString: function(value) {
    return value.split('').reverse().join('') === value;
  },
  messages: {
    en: 'This string is not the reverse of itself',
    fr: "Cette valeur n'est pas l'inverse d'elle même."
  }
})

I have just torn my hair, WHY WOULD THIS NOT WORK?

Laravel blade output of form field:

<input class="form-control" data-parsley-myvalidator="" name="edu[institute]" type="text">

EDIT: This form field is inside a Bootstrap Modal.

[Not quite complete](https://stackoverflow.com/help/mcve). Try to rewrite your question. — Will, Jun 22 '17 at 22:42
@Will what do you mean? its the same code from parsley js docs with a laravel form helper. What is missing? — Waleed, Jun 22 '17 at 22:42
The question form has a snippet function. You can copy HTML, Script and CSS in there, add the required libraries and insert the entire thing into your question. A 'run' button gets added so people can see the output of the example. There's quite a bit of work to be done here to try to even reproduce your problem, so it's not likely to get answered. Maybe someone else is working with all of the same technologies and they'll know the answer. You could get lucky. — Will, Jun 22 '17 at 22:46
wrap your input in the correct form tags. `
{{ Form::text('edu[institute]', null, ['class' => 'form-control', 'data-parsley-myValidator' => '']) }}
` — Will, Jun 23 '17 at 00:52

Will · Answer 1 · 2017-06-23T00:53:27.900

0

Their example seems to work fine. I still can't reproduce your issue.

window.Parsley.addValidator('palindrome', {
  validateString: function(value) {
    return value.split('').reverse().join('') === value;
  },
  messages: {
    en: 'This string is not the reverse of itself',
    fr: "Cette valeur n'est pas l'inverse d'elle même."
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.7.2/parsley.min.js"></script>
<form data-parsley-validate="">
  <label>Please enter a palindrome:</label>
  <input type="text" data-parsley-palindrome="">
  <input type="submit" class="btn">
</form>

edited Jun 23 '17 at 00:53

answered Jun 22 '17 at 23:01

Will

3,201
1
19
17

Is it because my form is inside a Bootstrap Modal? – Waleed Jun 22 '17 at 23:05
I doubt it. I think your Laravel form code isn't producing the correct markup. From my 2 minutes of Parsley JS experience, the form tag needs a `data-parsley-validate` attribute. I just glanced at the [laravel from docs](https://laravel.com/docs/4.2/html) and it looks like you might just be adding an input box with no surrounding form tag. Inspect your Elements in your browser to see what is getting written out an maybe you can spot the missing tags and attributes. – Will Jun 22 '17 at 23:09
Sir I have used Parsley a lot of times and I know Laravel good. I have form tags and markup is ok. – Waleed Jun 22 '17 at 23:14
I'll post my answer in a few mins, I'll try to solve it. – Waleed Jun 22 '17 at 23:14
I'm not picking on you, just saying that `{{ Form::text('edu[institute]', null, ['class' => 'form-control', 'data-parsley-myValidator' => '']) }}` emits some HTML. You haven't shown that anywhere so we can't help you spot the error. I *think* you'll get `` but I'm not sure since I don't program PHP or use Laraval Collective. – Will Jun 22 '17 at 23:29

ParsleyJS custom validator not working

1 Answers1