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

admin管理员组

文章数量:1185422

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>
        );
    }
});

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>
        );
    }
});

• javascript
• html
• reactjs
• validation

Share Improve this question Follow edited Feb 7, 2023 at 16:26 TylerH 21.1k7777 gold badges7979 silver badges111111 bronze badges asked Jun 24, 2015 at 8:49 Remi StureRemi Sture 13k55 gold badges2727 silver badges3838 bronze badges 3

• In your example, you show a form with a single Input element. However, in your screenshot, it looks like you are rendering other elements in your form. Where there is a single element, it becomes the default control that submits the form, so formNoValidate works. github.com/christianalfoni/formsy-react/issues/… – Tim Brayshaw Commented Jun 24, 2015 at 10:54
• The code examples are just stripped down. I have several input elements. – Remi Sture Commented Jun 24, 2015 at 14:52
• 1 The formNoValidate attribute is intended for elements that submit the form. Placing it on a "texty" type of input will only work if it is the only input in the form, as it becomes the input that submits the form. – Tim Brayshaw Commented Jun 24, 2015 at 21:32

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 20

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).

write "novalidate" in form tag.

Example

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

Example

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

<form onSubmit={this.handleSubmit} noValidate>

// code

</form>

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>

本文标签： javascriptHow to disable HTML validation in React using formsyreactStack Overflow