Проверка для двух полей в форме - PullRequest
Новая
       8

Проверка для двух полей в форме

0 голосов
/ 02 июля 2018

Мне было интересно, может ли кто-нибудь помочь мне проверить мою форму. Два поля, требующие проверки: номер дома и почтовый индекс Мне нужно сделать номер дома только двумя номерами и почтовый индекс только 5 символов.

Я использовал атрибут pattern и задавался вопросом, могу ли я отобразить сообщение в нескольких полях. 

<div class="col-md-6 text-center">
<form name="submit-to-google-sheet">
  <label>Address</label>
	<br>
  <input name="address" type="text" placeholder="House Number" pattern="[0-9]{2}">
	<br>
	<br>
  <input name="address2" type="text" placeholder="Street Name">
	<br>
	<br>
  <input name="city" type="text" placeholder="City/Town">
	<br>
	<br>
  <input name="postcode" type="text" placeholder="Postcode" pattern="[0-9]{5}">
	<br>
	<br>
  <label>Plant Type</label>
	<br>
	<select name="plant">
	<option value="tree">TREE</option>
	<option value="shrub">SHRUB</option>
	</select>
	<br>
	<br>
  <label>Description</label>
	<br>
  <textarea input name="description">
  </textarea>
	<br>
	<br>
  <label>Rating</label>
	<br>
<div class="rating">	
<input id="star1" type="radio" name="rating" value="1">
<label for="star1" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

	
<input id="star2" type="radio" name="rating" value="2">
<label for="star2" aria-hidden="true">
<i class="fas fa-star"></i>
</label>	
	
<input id="star3" type="radio" name="rating" value="3">
<label for="star3" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star4" type="radio" name="rating" value="4">
<label for="star4" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star5" type="radio" name="rating" value="5">
<label for="star5" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
</div>	
<br>
<br>
<button type="submit">SUBMIT</button>
</form>

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

просто вы можете использовать этот код

css: - 

       input:valid {
          color: green;
       }
     input:invalid {
        color: red;
        }


<div class="col-md-6 text-center">
<form name="submit-to-google-sheet">
  <label>Address</label>
	<br>
  <input name="address" type="text" placeholder="House Number" pattern="\d{2}" required>
	<br>
	<br>
  <input name="address2" type="text" placeholder="Street Name">
	<br>
	<br>
  <input name="city" type="text" placeholder="City/Town">
	<br>
	<br>
  <input name="postcode" type="text" placeholder="Postcode" pattern="\d{5}" required>
	<br>
	<br>
  <label>Plant Type</label>
	<br>
	<select name="plant">
	<option value="tree">TREE</option>
	<option value="shrub">SHRUB</option>
	</select>
	<br>
	<br>
  <label>Description</label>
	<br>
  <textarea input name="description">
  </textarea>
	<br>
	<br>
  <label>Rating</label>
	<br>
<div class="rating">	
<input id="star1" type="radio" name="rating" value="1">
<label for="star1" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

	
<input id="star2" type="radio" name="rating" value="2">
<label for="star2" aria-hidden="true">
<i class="fas fa-star"></i>
</label>	
	
<input id="star3" type="radio" name="rating" value="3">
<label for="star3" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star4" type="radio" name="rating" value="4">
<label for="star4" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star5" type="radio" name="rating" value="5">
<label for="star5" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
</div>	
<br>
<br>
<button type="submit">SUBMIT</button>
</form>
0 голосов
/ 02 июля 2018

Просто вы можете сделать это, используя атрибут html maxlength = "2"

Например 

<div class="col-md-6 text-center">
<form name="submit-to-google-sheet">
  <label>Address</label>
	<br>
  <input name="address" type="text" placeholder="House Number" pattern="[0-9]{2}" maxlength="2">
	<br>
	<br>
  <input name="address2" type="text" placeholder="Street Name">
	<br>
	<br>
  <input name="city" type="text" placeholder="City/Town">
	<br>
	<br>
  <input name="postcode" type="text" placeholder="Postcode" pattern="[0-9]{5}" maxlength="5">
	<br>
	<br>
  <label>Plant Type</label>
	<br>
	<select name="plant">
	<option value="tree">TREE</option>
	<option value="shrub">SHRUB</option>
	</select>
	<br>
	<br>
  <label>Description</label>
	<br>
  <textarea input name="description">
  </textarea>
	<br>
	<br>
  <label>Rating</label>
	<br>
<div class="rating">	
<input id="star1" type="radio" name="rating" value="1">
<label for="star1" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

	
<input id="star2" type="radio" name="rating" value="2">
<label for="star2" aria-hidden="true">
<i class="fas fa-star"></i>
</label>	
	
<input id="star3" type="radio" name="rating" value="3">
<label for="star3" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star4" type="radio" name="rating" value="4">
<label for="star4" aria-hidden="true">
<i class="fas fa-star"></i>
</label>

<input id="star5" type="radio" name="rating" value="5">
<label for="star5" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
</div>	
<br>
<br>
<button type="submit">SUBMIT</button>
</form>
...