Parsley validation and an error detection

JavaScript
1

I have solved adding a class on the particular input field.
An example:

fixed-margin-button1

An issue comes when there is particular input field and I try to detect parsley error status on this field. Description: data-parsley-trigger=“change” data-parsley-id=“13”

How to detect using Javascript.
I have tried to solve like an example:

   if (data-parsley-id=== 13) {
       button.setAttribute("class", "fixed-margin-button1");
   }

Need help how to do it in the correct way for the particular input cell (only specific field as there are many input fields…).

2

Try:

if (button.dataset.parsleyId === '13') {
  button.setAttribute("class", "fixed-margin-button1");
}
3

I have tested. It will not activate fixed-margin-button1.

4

Then please post enough code that we can recreate your problem.

5

As this validation works without SUBMIT button, it should show class fixed-margin-button1 in the case of error. I have checked again. An error added UI with an ID. We have button.dataset.parsleyId === ‘13’
It is not a button, but ID within UI which is connected to the input field.

<ul class="parsley-errors-list filled" id="parsley-id-13" aria-hidden="false"><li class="parsley-required">Field is requested</li></ul>

ParsleyValidationContactForm1 = {
init: function() {
  var $ = jQuery;

  $(document).ready(function()
   {
    var parsleyConfig = {
    errorsContainer: function(parsleyField) {
      return $('.msg_error_parsley1');
     }
    };

    $("#contact_form1").parsley(parsleyConfig);

    button.setAttribute("disabled", "");
    if (button.dataset.parsleyId === '13') {
     button.setAttribute("class", "fixed-margin-button1");
    }

    $("#contact_form1").on('submit', function(e)
     {
      var f = $(this);
      f.parsley().validate();

      if (f.parsley().isValid()) {
       alert('The form is valid');
      } else {
       alert('There are validation errors');
      }

      e.preventDefault();
     }
    );
   }
  );
 }
}
6

Hi,

That’s not enough code for me run and be able to reproduce the problem. If you could update the demo (maybe make a CodePen or JSFiddle or something?) I’ll be happy to take a look.

You can see what I mean here:

In the meantime, I’m not seeing any element with a data-parsley-id attribute on it. Also, where is button coming from?

7

I’m very sorry if I was not clear. Please find also working example which works. A problem is how to detect an error message for the particular field and add class to the button. Even you do not click on SUBMIT button it will show an error. An error should push class.

Source: https://stackoverflow.com/questions/30122028/change-the-position-of-parsley-errors-list-in-parsleyjs

<!DOCTYPE html>
<html lang="en" >
<head>

<meta charset="UTF-8">
<title>Parsley validation and error message</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/javascript.js"></script>
</head>

<body>
<form>

<div id="errors"></div>

<!-- Checkbox option -->
<fieldset>

<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" /> 1 </label>

<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2 </label>

<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3 </label>

</fieldset>

<div>
    <div class="radio radio-primary">
        <input type="radio" id="cellPhone1" value="1" name="rd_cell_phone" required="">
        <label for="cellPhone1"> Yes </label>
    </div>
    <div class="radio radio-primary">
        <input type="radio" id="cellPhone0" value="0" name="rd_cell_phone" required="">
        <label for="cellPhone0"> No </label>
    </div>
</div>

<div class="xxx"><button type="submit" class="button-submit"></button></div>

<script src="js/parsley.min.js"></script>
</form>


</body>

and JavaScript:

$(document).ready(function()
 {
  var parsleyConfig = {
  errorsContainer: function(parsleyField) {
    return $('#errors');
   }
  };


  $("form").parsley(parsleyConfig);
  if (button.dataset.parsleyId === '13') {
   button.setAttribute("class", "fixed-margin-button1");
  }

  $("form").on('submit', function(e)
   {
    var f = $(this);
    f.parsley().validate();

    if (f.parsley().isValid()) {
     alert('The form is valid');
    } else {
     alert('There are validation errors');
    }

    e.preventDefault();
   }
  );
 }
);
8

Thanks for the additional code. I have got the basic parsley form demo working now.

button is still undefined, but we’ll get to that in a bit.

So you want to add a class to the submit button whenever any of the form fields (i.e. radio buttons or checkboxes) fields is showing an error message.

Did I get that right?

9

I try to make more fields like above example. A problem arise when you like to set attribute when an error is detected even you do not click SUBMIT button. The validation benefits are in real action even you do not click SUBMIT. I’m not sure how it is shown ID for an error for the specific field. We have demo for two fields…

button.setAttribute
10

I’m really sorry. I don’t understand :frowning:

11

So, for the specific field. You do not need to set attribute for all errors. Just one field is an issue. Above example shows an error for each field. If you execute the second error it should add a class to the button. So, Parsley validation defines ID’s which I guess they can be pulled out.

12

So the second error would be the one associated with the radio buttons, right?

According to the parsley docs, you should be able to listen for error messages being triggered by that field like so:

$('#cellPhone1').parsley().on('field:success', function() {
  // Add class here
});

But I couldn’t get that to work for whatever reason and I am not familiar with parsley, I’m afraid.

What I could get to work though was listening for any error messages being triggered on the form and checking if any of them was caused by the second field:

window.Parsley.on('field:error', function() {
  if (this.$element['0']?.id.match(/^cellPhone/)){
    $('button').addClass('error')
  }
});

And while that works, it’s a bit hacky, and if I were you, I would spend some time digging in to the parsley API and the events that it fires.

HTH

13

Thank you for the message. I will try to fix. You are excellent developer.

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.