Как проверить форму semanti c UI с помощью jQuery - PullRequest
Новая
       7

Как проверить форму semanti c UI с помощью jQuery

0 голосов
/ 10 января 2020

У меня есть форма интерфейса пользователя Semanti c с полями ввода, которые являются обязательными (некоторые являются текстовыми, некоторые являются выпадающими). Я пытаюсь убедиться, что пользователь вводит эти поля, прежде чем продолжать использовать jQuery и проверку формы, но я сталкиваюсь с этой ошибкой: Error

Я использовал код из https://jsfiddle.net/5a1unxwd/1/ и https://semantic-ui.com/behaviors/form.html# / примеры для справки. Вот мой код для обработки отправки формы: 

 handleClick = async () => {
    //$('.ui.form')
    //    .form({
    //        on: 'blur',
    //        fields: {
    //           
    //            country: {
    //                identifier: 'country',
    //                rules: [
    //                    {
    //                        type: 'empty',
    //                        prompt: 'Please enter a country'
    //                    }
    //                ]
    //            },
    //            telephoneAlternate: {
    //                identifier: 'telephoneAlternate',
    //                rules: [
    //                    {
    //                        type: 'empty',
    //                        prompt: 'Please enter a telephone number'
    //                    }
    //                ]
    //            },
    //            deliveryOffice: {
    //                identifier: 'deliveryOffice',
    //                rules: [
    //                    {
    //                        type: 'empty',
    //                        prompt: 'Please select a delivery office'
    //                    }

    //                ]
    //            },
    //            
    //        }
    //    })
    //    ;

Вот код для формы: 

   <Form id="ui form segment" name="ui form segment" class="ui form segment" onSubmit={this.handleClick}>
<Form.Dropdown 
       defaultValue={this.state.initial}
       inline

        label='Delivery Office Location'
        selection
        className="dropdown2"
        name='deliveryOffice'
        value={deliveryOffice}
        options={citiesCostCenters}
        onChange={this.handleDeliveryOfficeChange}

        required />



<Form.Input
        inline
        selection
        control={Dropdown}
        options={testOptions}
        label='Country'
        className="dropdown1"
        name='country'
        onChange={this.handleCountryChange}
        onblur="validate()"

         />

 <Form.Field inline  className="leftforms">
        <label>Telephone (business): </label>
        <Input name='telephoneBusiness'  onblur="validate()" type="number"} 
value={telephoneBusiness} onChange={(e) => this.handleChange(e)}/>
                                        </Form.Field>

 <Button color="green" type="submit" className="nextbuttonuser" onClick={this.handleClick}>Next
<i class="right arrow icon"></i></Button>
</Form>

Я бы хотел, чтобы она выглядела так: look like:

...