Using Required in HTML 5 with pattern

Question

I have a form with below code...

<table width="100%" border="0">
          <tr>
            <td class="text-1" height="43" width="40%">Full Name :<font color="#ff3a00">*</font></td>
            <td height="43" width="60%"><input name="txtbox" type="text" class="txtbox" required/></td>
          </tr>

          <tr>
            <td height="43" class="text-1">&nbsp;</td>
            <td height="43"><input name="" class="submit-btn" type="submit" value="Submit" /></td>
          </tr>
        </table>

My issue is that whenever a user fills the Full Name textbox with SPACES.. the required attribute allows it..??

How can i stop if just SPACES are filled by any user...

Please let me know..

Also, i tired using patter in inputbox..

Actually, you just need the `pattern` attribute with `.*\S.*` regex to require at least one non-whitespace character in the input. — Wiktor Stribiżew, Aug 05 '15 at 07:29

score 0 · Answer 1 · edited Aug 05 '15 at 05:50

You can use pattern attribute of HTML5 and give regex expression to avoid spaces

<table width="100%" border="0">
  <tr>
    <td class="text-1" height="43" width="40%">Full Name :<font color="#ff3a00">*</font>
    </td>
    <td height="43" width="60%">
      <input name="txtbox" type="text" class="txtbox" pattern="^\S+$" required/>
    </td>
  </tr>

  <tr>
    <td height="43" class="text-1">&nbsp;</td>
    <td height="43">
      <input name="" class="submit-btn" type="submit" value="Submit" />
    </td>
  </tr>
</table>

score 0 · Answer 2 · answered Aug 05 '15 at 04:27

<table width="100%" border="0">
          <tr>
            <td class="text-1" height="43" width="40%">Full Name :<font color="#ff3a00">*</font></td>
            <td height="43" width="60%"><input name="txtbox" type="text" class="txtbox" pattern="[A-Za-z0-9\S]{1,25}" required/></td>
          </tr>

          <tr>
            <td height="43" class="text-1">&nbsp;</td>
            <td height="43"><input name="" class="submit-btn" type="submit" value="Submit" /></td>
          </tr>
        </table>

score 0 · Answer 3 · answered Aug 05 '15 at 04:30

<input name="txtbox" type="text" class="txtbox" required pattern="[A-Za-z]{1,}"/>

EXPLANATION:

the attribute pattern requires the input to match the regular expression pattern THE PATTERN [A-Za-z]{1,}

[A-Za-z] Any letter from A-Z or a-z

{1,} Minimum length is 1 and no specified maximum length

Using Required in HTML 5 with pattern

3 Answers3