Redux-form check validation when other field changes

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

How to validated field when other field changes and change validation type.

I have two fields

selection

input text

let's say when I change the selection the validation is fired up and validate the input depend on which selection I chose.

If the selection was 'Name' so it validates Name.lengt.
If the selection was 'age' so it validates number.
If the selection was 'email' so it validates email.

also if the validation is ok and then I change the selection it should fire up an error.

<form>

<select multiple>

  <option value="age">Volvo</option>

  <option value="email">Saab</option>

  <option value="name">Opel</option>

</select>

 <input type="text"/>

</form>

when I change the select the validation on the input also should be changed.
It's work fine, but when I type a valid value and then change the selection so validation doesn't work

edited Jan 3 at 7:45

asked Jan 3 at 6:04

aharo vishinsky

4129

write a function that takes in the field name and do some simple if-else checking?

– Isaac
Jan 3 at 6:07

I have some validation and it's work. but when I have a value in the input and I change the selection so the validation doesn't work

– aharo vishinsky
Jan 3 at 7:41

add a comment |

How to validated field when other field changes and change validation type.

I have two fields

selection

input text

let's say when I change the selection the validation is fired up and validate the input depend on which selection I chose.

If the selection was 'Name' so it validates Name.lengt.
If the selection was 'age' so it validates number.
If the selection was 'email' so it validates email.

also if the validation is ok and then I change the selection it should fire up an error.

<form>

<select multiple>

  <option value="age">Volvo</option>

  <option value="email">Saab</option>

  <option value="name">Opel</option>

</select>

 <input type="text"/>

</form>

when I change the select the validation on the input also should be changed.
It's work fine, but when I type a valid value and then change the selection so validation doesn't work

edited Jan 3 at 7:45

asked Jan 3 at 6:04

aharo vishinsky

4129

write a function that takes in the field name and do some simple if-else checking?

– Isaac
Jan 3 at 6:07

I have some validation and it's work. but when I have a value in the input and I change the selection so the validation doesn't work

– aharo vishinsky
Jan 3 at 7:41

add a comment |

How to validated field when other field changes and change validation type.

I have two fields

selection

input text

let's say when I change the selection the validation is fired up and validate the input depend on which selection I chose.

If the selection was 'Name' so it validates Name.lengt.
If the selection was 'age' so it validates number.
If the selection was 'email' so it validates email.

also if the validation is ok and then I change the selection it should fire up an error.

<form>

<select multiple>

  <option value="age">Volvo</option>

  <option value="email">Saab</option>

  <option value="name">Opel</option>

</select>

 <input type="text"/>

</form>

when I change the select the validation on the input also should be changed.
It's work fine, but when I type a valid value and then change the selection so validation doesn't work

edited Jan 3 at 7:45

asked Jan 3 at 6:04

aharo vishinsky

4129

How to validated field when other field changes and change validation type.

I have two fields

selection

input text

let's say when I change the selection the validation is fired up and validate the input depend on which selection I chose.

If the selection was 'Name' so it validates Name.lengt.
If the selection was 'age' so it validates number.
If the selection was 'email' so it validates email.

also if the validation is ok and then I change the selection it should fire up an error.

<form>

<select multiple>

  <option value="age">Volvo</option>

  <option value="email">Saab</option>

  <option value="name">Opel</option>

</select>

 <input type="text"/>

</form>

when I change the select the validation on the input also should be changed.
It's work fine, but when I type a valid value and then change the selection so validation doesn't work

reactjs react-redux redux-form

edited Jan 3 at 7:45

asked Jan 3 at 6:04

aharo vishinsky

4129

edited Jan 3 at 7:45

asked Jan 3 at 6:04

aharo vishinsky

4129

edited Jan 3 at 7:45

asked Jan 3 at 6:04

aharo vishinsky

4129

asked Jan 3 at 6:04

aharo vishinsky

4129

asked Jan 3 at 6:04

aharo vishinsky

4129

write a function that takes in the field name and do some simple if-else checking?

– Isaac
Jan 3 at 6:07

I have some validation and it's work. but when I have a value in the input and I change the selection so the validation doesn't work

– aharo vishinsky
Jan 3 at 7:41

add a comment |

write a function that takes in the field name and do some simple if-else checking?

– Isaac
Jan 3 at 6:07

I have some validation and it's work. but when I have a value in the input and I change the selection so the validation doesn't work

– aharo vishinsky
Jan 3 at 7:41

write a function that takes in the field name and do some simple if-else checking?

– Isaac
Jan 3 at 6:07

I have some validation and it's work. but when I have a value in the input and I change the selection so the validation doesn't work

– aharo vishinsky
Jan 3 at 7:41

add a comment |

1 Answer
1

active

oldest

votes

How about setting up your component so that each time you select a new option, it resets the validation and clears the input.

import React from "react";



class Checker extends React.Component {

  state = {

    text: "",

    validated: false,

    currentSelection: null

  };



  //when triggered, will clean up and set the current option to validate

  handleOptionSelected = event => {

    this.setState({

      text: "",

      validated: false,

      currentSelection: event.target.value //the option you picked

    });

  };



  handleOnChange = event => {

    this.setState({

      text: event.target.value

    });

   //write validation logic here

    if (this.state.currentSelection == age) {

      //check logic, setState validated to true

    }

    //repeat for other options

  };



  render() {

    return (

      <div>

        <form>

          <select multiple>

            <option onClick={this.handleOptionSelected} value="age">

              Volvo

            </option>

            <option onClick={this.handleOptionSelected} value="email">

              Saab

            </option>

            <option onClick={this.handleOptionSelected} value="name">

              Opel

            </option>

          </select>

          <input

            onChange={this.handleOnChange}

            type="text"

            value={this.state.text}

          />

        </form>

      </div>

    );

  }

}

answered Jan 3 at 8:06

yourfavoritedev

44618

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017089%2fredux-form-check-validation-when-other-field-changes%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

How about setting up your component so that each time you select a new option, it resets the validation and clears the input.

import React from "react";



class Checker extends React.Component {

  state = {

    text: "",

    validated: false,

    currentSelection: null

  };



  //when triggered, will clean up and set the current option to validate

  handleOptionSelected = event => {

    this.setState({

      text: "",

      validated: false,

      currentSelection: event.target.value //the option you picked

    });

  };



  handleOnChange = event => {

    this.setState({

      text: event.target.value

    });

   //write validation logic here

    if (this.state.currentSelection == age) {

      //check logic, setState validated to true

    }

    //repeat for other options

  };



  render() {

    return (

      <div>

        <form>

          <select multiple>

            <option onClick={this.handleOptionSelected} value="age">

              Volvo

            </option>

            <option onClick={this.handleOptionSelected} value="email">

              Saab

            </option>

            <option onClick={this.handleOptionSelected} value="name">

              Opel

            </option>

          </select>

          <input

            onChange={this.handleOnChange}

            type="text"

            value={this.state.text}

          />

        </form>

      </div>

    );

  }

}

answered Jan 3 at 8:06

yourfavoritedev

44618

add a comment |

How about setting up your component so that each time you select a new option, it resets the validation and clears the input.

import React from "react";



class Checker extends React.Component {

  state = {

    text: "",

    validated: false,

    currentSelection: null

  };



  //when triggered, will clean up and set the current option to validate

  handleOptionSelected = event => {

    this.setState({

      text: "",

      validated: false,

      currentSelection: event.target.value //the option you picked

    });

  };



  handleOnChange = event => {

    this.setState({

      text: event.target.value

    });

   //write validation logic here

    if (this.state.currentSelection == age) {

      //check logic, setState validated to true

    }

    //repeat for other options

  };



  render() {

    return (

      <div>

        <form>

          <select multiple>

            <option onClick={this.handleOptionSelected} value="age">

              Volvo

            </option>

            <option onClick={this.handleOptionSelected} value="email">

              Saab

            </option>

            <option onClick={this.handleOptionSelected} value="name">

              Opel

            </option>

          </select>

          <input

            onChange={this.handleOnChange}

            type="text"

            value={this.state.text}

          />

        </form>

      </div>

    );

  }

}

answered Jan 3 at 8:06

yourfavoritedev

44618

add a comment |

How about setting up your component so that each time you select a new option, it resets the validation and clears the input.

import React from "react";



class Checker extends React.Component {

  state = {

    text: "",

    validated: false,

    currentSelection: null

  };



  //when triggered, will clean up and set the current option to validate

  handleOptionSelected = event => {

    this.setState({

      text: "",

      validated: false,

      currentSelection: event.target.value //the option you picked

    });

  };



  handleOnChange = event => {

    this.setState({

      text: event.target.value

    });

   //write validation logic here

    if (this.state.currentSelection == age) {

      //check logic, setState validated to true

    }

    //repeat for other options

  };



  render() {

    return (

      <div>

        <form>

          <select multiple>

            <option onClick={this.handleOptionSelected} value="age">

              Volvo

            </option>

            <option onClick={this.handleOptionSelected} value="email">

              Saab

            </option>

            <option onClick={this.handleOptionSelected} value="name">

              Opel

            </option>

          </select>

          <input

            onChange={this.handleOnChange}

            type="text"

            value={this.state.text}

          />

        </form>

      </div>

    );

  }

}

answered Jan 3 at 8:06

yourfavoritedev

44618

How about setting up your component so that each time you select a new option, it resets the validation and clears the input.

import React from "react";



class Checker extends React.Component {

  state = {

    text: "",

    validated: false,

    currentSelection: null

  };



  //when triggered, will clean up and set the current option to validate

  handleOptionSelected = event => {

    this.setState({

      text: "",

      validated: false,

      currentSelection: event.target.value //the option you picked

    });

  };



  handleOnChange = event => {

    this.setState({

      text: event.target.value

    });

   //write validation logic here

    if (this.state.currentSelection == age) {

      //check logic, setState validated to true

    }

    //repeat for other options

  };



  render() {

    return (

      <div>

        <form>

          <select multiple>

            <option onClick={this.handleOptionSelected} value="age">

              Volvo

            </option>

            <option onClick={this.handleOptionSelected} value="email">

              Saab

            </option>

            <option onClick={this.handleOptionSelected} value="name">

              Opel

            </option>

          </select>

          <input

            onChange={this.handleOnChange}

            type="text"

            value={this.state.text}

          />

        </form>

      </div>

    );

  }

}

answered Jan 3 at 8:06

yourfavoritedev

44618

answered Jan 3 at 8:06

yourfavoritedev

44618

answered Jan 3 at 8:06

yourfavoritedev

44618

answered Jan 3 at 8:06

yourfavoritedev

44618

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu