Question

我正在表单中使用验证函数，该函数检查字段是否为空。这适用于普通文本输入框，但不适用于Typeahead框。

我要检查Typeahead框是否为 empty ，如果是，请显示错误消息，即this.state.industryError

这是我的状态：

state = {
 name: "",
 industry: [],
 nameError: "",
 industryError: "",
}

这是我的Typeahead表单元素：

<Form>
 <Label>Industry</Label>
  <Typeahead
   id="industryMultiSelect"
   multiple
   options={industries}
   placeholder="Select industry..."
   onChange={this.handleTypeaheadChangeIndustry} />
    <div>
     {this.state.industryError}      // Where the error message appears
    </div>
</Form>

我的验证功能如下：

validate = () => {
    let nameError = "";
    let industryError = "";

    if(!this.state.name) {                  // Checks if field is empty
      nameError = "Please enter a name";
    }

    if(this.state.industry === []) {     // I think this is the problem
      industryError = "Please enter an industry";
    }

    if (nameError || industryError) {
      this.setState({nameError, industryError});

      return false;
    }
      return true;
  };

这是handleChange函数，我要求提前输入：

handleTypeaheadChangeIndustry = selected => {
    const industry = selected.map(option => option.value);
    this.setState({industry})
  };

它与name字段一起正常工作，因为它等于一个空字符串。但是使用Typeahead并不是字符串，因此我不确定将this.state.industry设置为什么。

我们非常感谢您的帮助或建议，如果您需要更多详细信息，我可以迅速更新我的答案。

Answer 1

要弄清楚为什么看不到所有代码而代码无法正常工作有点困难。就是说，我创建了一个沙箱，相信在使用上面发布的代码后您会做什么：

https://codesandbox.io/s/react-bootstrap-typeahead-form-validation-686qe

如@ ravibagul91所述，您应该使用以下其中一种

$('form').submit(function(event) {
    event.preventDefault();
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: '{{ url('/agents') }}',
        type: 'POST',              
        data: formData,
        success: function(result)
        {
            location.reload();
        },
        error: function(data)
        {
            console.log(data);
        }
    });

});

而不是

String js = "(function(){var element = document.getElementById( 'my-text' );return window.getComputedStyle( element, null ).getPropertyValue('font-family');})()";

webView.evaluateJavascript(js, new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String s) {
        Log.d("FontFamily", s); 
    }
});

在我发布的沙箱中使用后者会导致代码无法正常工作，而在使用前两个方法中的任何一个时都可以正常工作。

验证React-Bootstrap-Typeahead输入

1 个答案: