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.

Home Page:https://just-validate.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

showErrors: Field not found if using diferrent selector in addField()

ceciiiron opened this issue · comments

commented

Describe the bug

showErrors() does not work if I used a different selector in validator.addField(); It shows the error "Field not found".

Below code does not work when using showErrors():

validator.addField(document.getElementById('test-input'), [{ rule: 'required' }])

It only works if you set addField() in this way:

validator.addField("#test-input", [{ rule: 'required' }]);

To Reproduce
Steps to reproduce the behavior:

Copy and paste the code below to the playground

function Demo(props) {
  onLoad(() => {
    const validator = new JustValidate('#basic_form');
    validator
      .addField(document.getElementById("not-working"),  [{ rule: 'required' }])
      .addField("#working",  [{ rule: 'required' }])
      
    setTimeout(() => { 
      validator.showErrors({  "#not-working": "input error",  "#working" :"working show error" } );      
    },1000);   
    
    
  });

  return (
    <form id="basic_form" autocomplete="off" novalidate="novalidate">
    <div>
      <input type="textbox" id="not-working"/>
    </div>
      <div>
      <input type="textbox" id="working"/>
    </div>
      <div class="control-wrapper">
        <button type="submit" class="button">
          Submit
        </button>
      </div>
    </form>
  );
}

Expected behavior
showErrors should work regardless of selector used in addField()