horprogs / Just-validate

Modern, simple, lightweight (~5kb gzip) form validation library written in Typescript, with no dependencies (no JQuery!). Support a wide range of predefined rules, async, files, dates validation, custom error messages and styles, localization. Support writing custom rules and plugins.
https://just-validate.dev/
Other
509 stars 92 forks source link

showErrors not working on groups #129

Open will-attitude-marketing opened 1 year ago

will-attitude-marketing commented 1 year ago

Describe the bug I have a multiple checkbox group and used .addRequiredGroup() to make it required.

Submitting the form using the submit button works as expected: i see the required error message for the multiple checkbox

When I try to manually show the error using showErrors, I get the following error: Field not found. Check the field selector.

An example of the bug using the playgroud(https://just-validate.dev/playground):

function Demo(props) {
  onLoad(() => {
    const validator = new JustValidate('#basic_form');
    validator
      .addField("#txtInput",  [{ rule: 'required' }])
      .addRequiredGroup("#checkboxes","this is required");
    setTimeout(() => { 
      validator.showErrors({  "#txtInput": "input error", "#checkboxes":"errors", } );      
    },1000);   

  });

  return (
    <form id="basic_form" autocomplete="off" novalidate="novalidate">
    <div>
      <input type="textbox" id="txtInput"/>
    </div>
      <div id="checkboxes">
      <input type="checkbox" id="checkbox_option[0]" />
      <input type="checkbox" id="checkbox_option[1]" />
      <input type="checkbox" id="checkbox_option[2]" />
      <input type="checkbox" id="checkbox_option[3]" />
      </div>
      <div class="control-wrapper">
        <button type="submit" class="button">
          Submit
        </button>
      </div>
    </form>
  );
}
horprogs commented 11 months ago

Hey, unfortunately currently there is no support for showing error messages for groups