CODEWITHSUNDEEP
javascripthtmlreactjsvalidation
Remi Sture
Remi Sture

Reputation: 12978

How to disable HTML validation in React using formsy-react?

I'm trying to get rid of the browser's default validation logic using formsy-react, and according to the documentation the "formNoValidation" attribute should do the trick. But I can't get it to work.

What am I doing wrong?

var React = require('React');
var Formsy = require('formsy-react');
var Input = require('./forms/Input.js');

module.exports = React.createClass({
    render: function () {
        return (
           <Formsy.Form>
              <Input ref="phonenumber" id="phonenumber" value={this.state.phonenumber.value} name="phonenumber" required validations="isNumeric" validationError="Please provide a valid phone number" />
           </Formsy.Form>
        );
    }
});

Input.js

var Formsy = require('formsy-react');
var React = require('React');

module.exports = React.createClass({
    mixins: [Formsy.Mixin],
    
    changeValue: function (event) {
        this.setValue(event.currentTarget.value);
    },
    
    render: function () {
        var className = this.showRequired() ? 'required' : this.showError() ? 'error' : null;
        var isReadOnly = this.props.readOnly;
        var errorMessage = this.getErrorMessage();
        
        return (
            <div className={className}>
                <input type="text" onChange={this.changeValue} value={this.getValue()} readOnly={isReadOnly} required={this.isRequired()} formNoValidate />
                <span>{errorMessage}</span>
            </div>
        );
    }
});

Default validation message, even though the formnovalidate attribute is present

Upvotes: 9

Views: 19993

Answers (4)

Negant
Negant

Reputation: 119

To disable HTML validation, use noValidate, it`s camel case sensitve:

<form onSubmit={this.handleSubmit} noValidate>

// code

</form>

Upvotes: 3

Tim Brayshaw
Tim Brayshaw

Reputation: 512

The formNoValidate attribute is only intended for elements that submit the form. So, placing it on a "text" type of input will work if it is the only input in the form (no submit button).

Imagine having a form for writing an article, It could have two submit buttons, one for "Save draft" that doesn't need to run native validation, and one for "Publish" that does.

Adding noValidate on the form tag should disable native validation on the form completely, however this isn't possible until issue issue 89 is resolved (scheduled for the next release).

Upvotes: 20

Remi Sture
Remi Sture

Reputation: 12978

Apparently, this is a way around the problem:

<Formsy.Form>
   <Input ref="phonenumber" id="phonenumber" name="phonenumber" validations="isNumeric" validationError="Oppgi et gyldig telefonnummer"/>
   <input type="submit" formNoValidate value="Submit"/>
</Formsy.Form>

Upvotes: 1

ItzMe_Ezhil
ItzMe_Ezhil

Reputation: 1406

write "novalidate" in form tag.

Example 

    <form method="post" novalidate>...</form>

Example

Upvotes: 4

Related Questions