Possibility to validate all fields

[allangrds]

The library actually doesn't allow to manually validate all inputs. The idea is to call the method, show all errors and return a boolean, which contains if the form is valid, or is not.

handleClick() {
    const isFormValid = this.refs.form.validateAllFields();

    if(isFormValid)
        console.log('Valid');
    else
        console.log('Invalid');
}

<Formsy ref="form">
    <input ...code>
    <button onClick={this.handleClick.bind(this)}>
</Formsy>

[rkuykendall]

I think you could do this by keeping track of the current valid status using the callbacks and then triggering a submit on the form. Triggering a submit will show all the errors, and you can keep track of the boolean with onValid() and onInvalid(). Only downside would be that you don't want to do a real submit, but you could handle that by having a variable blocking your submit function when this happens.

Is there something I'm missing?

[MilosRasic]

What @rkuykendall said. It corresponds to the controlled inputs paradigm but the whole form is controlled in this case, storing validity in state instead of a value. It's usually not recommended to use refs to call methods on a child unless you really have a good reason.

I guess we could consider a PR to support a method as an alternate way to validate the form but someone would have to submit one.

[allangrds]

@rkuykendall So, what i'm doing wrong?

The form is being submited, but there isn't any form validation.

handleClick() {
    console.log('click');
    document
      .getElementById("exampleForm")
      .dispatchEvent(
        new Event(
          'submit',
          {
            cancelable: true
          }
        )
      );
  }


<div className="Billing">
        <h1>Billing</h1>
        <Formsy
          id="exampleForm"
          onValid={this.enableButton}
          onInvalid={this.disableButton}
        >
          <Input
            name="email"
            validations="isEmail"
            validationError="This is not a valid email"
            required
          />
          <button
          >
            Submit do Billing
          </button>
        </Formsy>
        <button <Footer 
          onClick={this.handleClick.bind(this)}
        >
            Send
        </button>
      </div>

[MilosRasic]

Please clarify "there isn't any form validation". Is onValid and onInvalid not being called when you click on the button outside the form?

Also a working jsfiddle/jsbin/whatever or a git repo reproducing the issue would be nice. I don't think

        <button <Footer 
          onClick={this.handleClick.bind(this)}
        >
            Send
        </button>

is valid jsx.

My team also had an issue with submitting the form with a button outside the form, but it wasn't related to validation. We ended up moving it into the form but one solution I really liked was the form attribute on button:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

You'd need a polyfill for IE though which handles the click similarly to your handleClick() method. We might want to look into supporting this in a browser-agnostic way through Formsy.

[MilosRasic]

inactive, closing