Formularvalidierung mit Semantic-UI-React

Question

Ich verwende die offiziellen Semantic UI React Komponenten, um eine Webanwendung zu erstellen. Ich habe ein Formular auf meiner Anmeldeseite, das ein E-Mail-Feld, ein Passwortfeld und ein Bestätigungsfeld enthält.

import {Component} from 'react'; 
import {Button, Form, Message} from 'semantic-ui-react'; 
import {signUp} from '../../actions/auth'; 

class SignUp extends Component { 
    constructor(props) { 
     super(props); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 
    handleSubmit(e, {formData}) { 
     e.preventDefault(); 

     // 
     // Potentially need to manually validate fields here? 
     // 

     // Send a POST request to the server with the formData 
     this.props.dispatch(signUp(formData)).then(({isAuthenticated}) => { 
      if (isAuthenticated) { 
       // Redirect to the home page if the user is authenticated 
       this.props.router.push('/'); 
      } 
     } 
    } 
    render() { 
     const {err} = this.props; 

     return (
      <Form onSubmit={this.handleSubmit} error={Boolean(err)}> 
       <Form.Input label="Email" name="email" type="text"/> 
       <Form.Input label="Password" name="password" type="password"/> 
       <Form.Input label="Confirm Password" name="confirmPassword" type="password"/> 

       {err && 
        <Message header="Error" content={err.message} error/> 
       } 

       <Button size="huge" type="submit" primary>Sign Up</Button> 
      </Form> 
     ); 
    } 
} 

Nun bin ich auf der regulären Semantic UI-Bibliothek verwendet, die eine Form Validation addon hat. Normalerweise würde ich die Regeln, wie dies in einem separaten JavaScript-Datei definiert

$('.ui.form').form({ 
    fields: { 
     email: { 
      identifier: 'email', 
      rules: [{ 
       type: 'empty', 
       prompt: 'Please enter your email address' 
      }, { 
       type: 'regExp', 
       value: "[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", 
       prompt: 'Please enter a valid email address' 
      }] 
     }, 
     password: { 
      identifier: 'password', 
      rules: [{ 
       type: 'empty', 
       prompt: 'Please enter your password' 
      }, { 
       type: 'minLength[8]', 
       prompt: 'Your password must be at least {ruleValue} characters' 
      }] 
     }, 
     confirmPassword: { 
      identifier: 'confirmPassword', 
      rules: [{ 
       type: 'match[password]', 
       prompt: 'The password you provided does not match' 
      }] 
     } 
    } 
}); 

Gibt es eine ähnliche Methode unter Verwendung der Semantic UI Reagieren Komponenten für die Form der Validierung? Ich habe die Dokumentation ohne Erfolg durchsucht, und es scheint keine Beispiele für die Validierung mit dieser Semantic UI React-Bibliothek zu geben.

Muss ich stattdessen jedes Feld von Hand in der handleSubmit Funktion validieren? Was ist der beste Weg, um dieses Problem zu beheben? Danke für die Hilfe!

Answer 1

Muss ich stattdessen jedes Feld von Hand im handleSubmit Funktion validieren?

Traurig, aber wahr. SUIR doesn't have Formular Validierung jetzt. Sie können HOC jedoch verwenden, um mit Formularen wie redux-form zu arbeiten.

Answer 2

In den meisten Fällen müssen Formulare von Hand validiert werden. RSUI enthält jedoch ein paar Werkzeuge, um die Dinge ein wenig einfacher zu machen, insbesondere die Fehlerstütze auf <Form> und <Form.Input>

Hier ist ein Beispiel für ein Formular, das ich vor kurzem zusammengestellt habe. Es könnte ein wenig Refactoring verwenden, aber es funktioniert grundsätzlich, indem jede Eingabe mit einer onChange()-Funktion verknüpft wird und ein Callback an die Submit-Funktion übergeben wird, die die Sichtbarkeit des Ladebildschirms und den Abschnitt "Erfolg. Vielen Dank für die Übermittlung" steuert der Form.

export default class MeetingFormModal extends Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
     firstName: '', 
     lastName: '', 
     email: '', 
     location: '', 
     firstNameError: false, 
     lastNameError: false, 
     emailError: false, 
     locationError: false, 
     formError: false, 
     errorMessage: 'Please complete all required fields.', 
     complete: false, 
     modalOpen: false 
    } 

    this.submitMeetingForm = this.submitMeetingForm.bind(this); 
    this.successCallback = this.successCallback.bind(this); 
    } 


    successCallback() { 
    this.setState({ 
     complete: true 
    }) 
    setTimeout(() => {this.setState({modalOpen: false})}, 5000); 
    this.props.hideLoading(); 
    } 

    handleClose =() => this.setState({ modalOpen: false }) 
    handleOpen =() => this.setState({ modalOpen: true }) 

    submitMeetingForm() { 

    let error = false; 

    if (this.state.studentFirstName === '') { 
     this.setState({firstNameError: true}) 
     error = true 
    } else { 
     this.setState({firstNameError: false}) 
     error = false 
    } 
    if (this.state.studentLastName === '') { 
     this.setState({lastNameError: true}) 
     error = true 
    } else { 
     this.setState({lastNameError: false}) 
     error = false 
    } 
    if (this.state.email === '') { 
     this.setState({emailError: true}) 
     error = true 
    } else { 
     this.setState({emailError: false}) 
     error = false 
    } 
    if (this.state.location === '') { 
     this.setState({locationError: true}) 
     error = true 
    } else { 
     this.setState({locationError: false}) 
     error = false 
    } 

    if (error) { 
     this.setState({formError: true}) 
     return 
    } else { 
     this.setState({formError: false}) 
    } 


    let meeting = { 
     first_name: this.state.firstName, 
     last_name: this.state.lastName, 
     email: this.state.email, 
     location: this.state.location, 

    this.props.createMeeting(meeting, this.successCallback) 
    this.props.showLoading(); 
    } 

    capitalize(string) { 
    return string.charAt(0).toUpperCase() + string.slice(1); 
    } 

    render() { 
    return(
     <Modal 
     trigger={<Button onClick={this.handleOpen} basic color='blue'>Schedule Now</Button>} 
     open={this.state.modalOpen} 
     onClose={this.handleClose} 
     closeIcon={true} 
     > 
     <Modal.Header>Schedule Your Interview</Modal.Header> 
     <Modal.Content> 
      {!this.state.complete ? 
      <Modal.Description> 
      <Form error={this.state.formError}> 
       <Form.Group widths='equal'> 
       <Form.Field> 
        <Form.Input required={true} onChange={(e) => this.setState({firstName: e.target.value})} label='First Name' placeholder="First Name..." error={this.state.firstNameError}/> 
       </Form.Field> 
       <Form.Field> 
        <Form.Input required={true} onChange={(e) => this.setState({lastName: e.target.value})} label='Last Name' placeholder="Last Name..." error={this.state.lastNameError}/> 
       </Form.Field> 
       </Form.Group> 
       <Form.Field > 
       <Form.Input required={true} onChange={(e) => this.setState({email: e.target.value})} label='Email' placeholder="Email..." error={this.state.emailError}/> 
       </Form.Field> 
       <Form.Field> 
       <Form.Input required={true} onChange={(e) => this.setState({location: e.target.value})} label='Location' placeholder='City, State/Province, Country...' error={this.state.locationError}/> 
       </Form.Field> 
      </Form> 
      </Modal.Description> 
      : 
      <div className='modal-complete'> 
       <Image src='/images/check.png' /> 
       <p>Thanks for scheduling a meeting, {this.capitalize(this.state.name)}. We've received your information and we'll be in touch shortly.</p> 
      </div> 
      } 
     </Modal.Content> 
     {!this.state.complete ? 
     <Modal.Actions> 
      <Button color='red' onClick={this.handleClose}>Close</Button> 
      <Button positive icon='checkmark' labelPosition='right' content="Submit" onClick={this.submitMeetingForm} /> 
     </Modal.Actions> 
     : null } 
     </Modal> 
    ) 
    } 
} 

Hoffe, dass hilft!