HTML Forms Input Example

First Name

Doesn't meet regex /^[A-K][a-z]+$/.
ex "Cat" or "Dog" but not "cat"

Last name*

Required field

            {
  "__v": 1,
  "name": "firstName",
  "error": 7,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": "krillin",
  "startValue": "krillin",
  "startDisabled": false
}

            {
  "__v": 1,
  "name": "lastName",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": "???",
  "startValue": "???",
  "startDisabled": false
}

Check box1*

Checkbox1 is a required field

            {
  "__v": 1,
  "name": "checkbox1",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": true,
  "value": true,
  "startValue": true,
  "startDisabled": true
}

Number

€

Must be between -2 and 10001

            {
  "__v": 1,
  "name": "email",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": "[email protected]",
  "startValue": "[email protected]",
  "startDisabled": false
}

            {
  "__v": 1,
  "name": "numeric",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": 2,
  "startValue": "2.0",
  "startDisabled": false
}

Password

Colour

            {
  "__v": 1,
  "name": "password",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": "secret",
  "startValue": "secret",
  "startDisabled": false
}

            {
  "__v": 1,
  "name": "colorName",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": "#FF00FF",
  "startValue": "#FF00FF",
  "startDisabled": false
}

Text area

            {
  "__v": 1,
  "name": "range",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": 30,
  "startValue": 30,
  "startDisabled": false
}

            {
  "__v": 1,
  "name": "textarea",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": "",
  "startValue": "",
  "startDisabled": false
}

            {
  "__v": 1,
  "name": "radiobutton1",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": "6",
  "startValue": "6",
  "startDisabled": false
}

            {
  "__v": 1,
  "name": "radiobutton2",
  "error": 5,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "startDisabled": false
}

Select1*

Required field. This warning will show even if the input hasn't been touched.

Select2

            {
  "__v": 1,
  "name": "select1",
  "error": 5,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "startDisabled": false
}

            {
  "__v": 1,
  "name": "select2",
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": {
    "value": "5",
    "id": "3"
  },
  "startValue": {
    "value": "5",
    "id": "3"
  },
  "startDisabled": false
}

Cannot submit until form errors are corrected.