Correct way to validate MDBSelect in React Form

Topic: Correct way to validate MDBSelect in React Form

frantoqui free asked 5 years ago

Hello,

After reading the documentation, I wonder if there is any way to validate a MDBSelect component, I was able to do it adding a text input under it and when the select change update the value of the text input, but I am sure that there is a better way to do it.

Thank you in advance

Resources (screenshots, code snippets etc.)

<div key={key}>
                    <label htmlFor={key}>{key}</label>
                    <MDBSelect id={key} color="secondary" getValue={value => this.handleValueChange(key, value)}>
                        <MDBSelectInput selected="Choose your option" />
                        <MDBSelectOptions>
                            <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                            {this.renderAttributesValues(attribute_values[key])}
                        </MDBSelectOptions>
                    </MDBSelect>
                    <input type="text" id={"input-"+key} className="CatalogPhotoGridProductModal hide-input-form form-control" required />
                    <div className="valid-feedback">Nice Choice!</div>
                    <div className="invalid-feedback">
                        Please select a {key}.
                    </div>
                </div>

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

1 0 Best answer

<p>Unfortunately, there is no property <code>required</code> for our Select component. But it's a good idea to implement it in the future.</p>

<p>By default input's text = <code>'Choose your option'</code> string. If there is no option selected it doesn't change. </p>

<p>Rely on the information above for make our form validation, you can use <code>button</code> with a onClick method where your validation logic will be described.   You can try next code(required to be finished ) :</p>

<pre class="prettyprint"><code>import React, { Component } from 'react';
import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption, MDBContainer } from 'mdbreact';

class FormValidation extends Component {
    state = {
        value: 'Choose your option'
    };

// build function for your selects, and pass it as getValue property to reed the select's value
    getValueOfSelect = (value) => {
        this.setState({ value });
    };

handleSubmit = (e) => {
        e.preventDefault();
        if (this.state.value !== 'Choose your option') {
        //....validation logic here
        }
    };

render() {
        return (
            <MDBContainer>
                <form>
                    <MDBSelect getValue={this.getValueOfSelect} getTextContent={this.getValueOfSelect}>
                        <MDBSelectInput />
                        <MDBSelectOptions>
                            <MDBSelectOption>Option nr 1</MDBSelectOption>
                            <MDBSelectOption>Option nr 2</MDBSelectOption>
                            <MDBSelectOption>Option nr 3</MDBSelectOption>
                            <MDBSelectOption>Option nr 4</MDBSelectOption>
                            <MDBSelectOption>Option nr 5</MDBSelectOption>
                        </MDBSelectOptions>
                    </MDBSelect>

<button type="submit"onClick={this.handleSubmit}>
                        Submit
                    </button>
                </form>
            </MDBContainer>
        );
    }
}

export default FormValidation;
</code></pre>

<p>Best regards.</p>

Please insert min. 20 characters.

Unfortunately, there is no property required for our Select component. But it's a good idea to implement it in the future.

By default input's text = 'Choose your option' string. If there is no option selected it doesn't change.

Rely on the information above for make our form validation, you can use button with a onClick method where your validation logic will be described. You can try next code(required to be finished ) :

import React, { Component } from 'react';
import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption, MDBContainer } from 'mdbreact';

class FormValidation extends Component {
    state = {
        value: 'Choose your option'
    };

    // build function for your selects, and pass it as getValue property to reed the select's value
    getValueOfSelect = (value) => {
        this.setState({ value });
    };

    handleSubmit = (e) => {
        e.preventDefault();
        if (this.state.value !== 'Choose your option') {
        //....validation logic here
        }
    };

    render() {
        return (
            <MDBContainer>
                <form>
                    <MDBSelect getValue={this.getValueOfSelect} getTextContent={this.getValueOfSelect}>
                        <MDBSelectInput />
                        <MDBSelectOptions>
                            <MDBSelectOption>Option nr 1</MDBSelectOption>
                            <MDBSelectOption>Option nr 2</MDBSelectOption>
                            <MDBSelectOption>Option nr 3</MDBSelectOption>
                            <MDBSelectOption>Option nr 4</MDBSelectOption>
                            <MDBSelectOption>Option nr 5</MDBSelectOption>
                        </MDBSelectOptions>
                    </MDBSelect>

                    <button type="submit"onClick={this.handleSubmit}>
                        Submit
                    </button>
                </form>
            </MDBContainer>
        );
    }
}

export default FormValidation;

Best regards.

Aliaksandr Andrasiuk staff commented 5 years ago

Realized that there is a better way to check selected options. It's should be enough to add e.preventDefault method in if condition.

So if there is no option selected then a submit button will not allow submitting the form.

 handleSubmit = (e) => {
        if (this.state.value !== 'Choose your option') {
            e.preventDefault();
        }
    };

Try this in your application.

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

Hi,

I'm glad I could help.

Best regards,

Aliaksandr from MDB.

Add comment

frantoqui free answered 5 years ago

0 0 Best answer

Hello,

Thank you very much for your reply, I hope they implement the required in the select box soon, I added your code and works like a charm.

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello,

It depends on what kind of validation you want to use. If you want to prevent next actions if none of the options is selected it's enough to store a variable with this information in state.

You can use getValue for achieving that. In your handleValueChange method you can set your state with information about the chosen option.

For example, the initial value will be null. After clicking on the option this value will be changed. If there is no option selected(still set to null) then use your validation logic.

If you mean something else contact me again.

Best regards.

frantoqui free commented 5 years ago

Hello, thanks for your answer, I want to use the form validation, the MDBSelect is inside a form, I tried to add the required tag in MDBSelect and didn't work.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.13.0
Device: Desktop
Browser: Mozilla Firefox
OS: Windows10
Provided sample code: No
Provided link: No

frantoqui

25Support score
1Questions 2Answers 0Snippets