?? aria-invalid ??? ??? ??????. aria-invalid ?? ? ?? ??? ???? ?? ? ??? ??? ?

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

??? ?? ?? ?? ? ????? ??? ??? ?? box-shadow? ????? (? ??? ????? ?? ??? ???? ?????). box-shadow ?? ??? ????? ??? ??? ????? ?? ??? ?? ??? ??? ?? ??? ?? ?? ??? ?? ? ? ????.

??? ?? ?? ???? ??? ??? ???? ??? ???? ???? ???? ?? ?? ??? ? ??? ?? ?? ??? ????. ??? ?? ?? ?? ??? ?? ?? ??????? REGEX ??? ? ???? ??? ??? ????. ?? ??? ???? ??? ???? ??? ???? ??

??? ???? ? ? ????. ?? ????? ???? ?? ?? ?? ??? ?? ? ??? ??? ??????. ??. ?? ?????! ?????, ??? ????? ?? ??? aria-invalid ???? ????????. ??? ?? ???????. onchange ??? ??? ???? ???? ???? (????? ??? ????? ??? ??? ????) ?? ?????? ??? ????? 8 ? ????? ???

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

<<> ??? ?? onchange <->? ???? ??? ???? ? ????? ??? ???? ??? ? ?? ???? ???? ? ??? ??? ?? ?? ?????. onchange ? ????? ?? ? ??? ??? ? ????? ??? ??? ?? ????? ?? ? ? ????. ??? ?????? ??? ??? ???? ? ? ??? ????? ??? ?? ????? ??? ?? ?? ?? ??? ??????. ??? ?/?? ? ?? ??? ???????. ? ??? ??? ???. ?? ??????, ??? ??? ??? ??? ??? ???? ??! ??? ?? (IE7 ? ?? ?? ?????? ??)? ?? ?? ? ??? ???? ? ??? ??? ??? ??? ? ? ????? ?? ??? ??? ?????. ?? ?? ??? ??????.? ?? ?? ????? ?? ?? ??? ???????? onchange

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}