Javascript Keyup Form - PullRequest
Новая
       6

Javascript Keyup Form

0 голосов
/ 12 ноября 2018

Как можно отобразить неправильные или правильные слова рядом с формой любого цвета рядом с полем при вводе?Я пытаюсь сделать так, чтобы в режиме реального времени я получал правильные и неправильные значения при вводе значений, соответствующих правилу JS.

Это должно давать правильное или неправильное значение в реальном времени рядом с полем, и если оно совпадаетПравило, тогда оно отображает правильно

Мой HTML: 

<!doctype html>
<html lang="en">
<head>
<title> Form Example </title>
<meta charset="utf-8">
<link href="keyupform.css" rel="stylesheet">
<script src="prototype.js"></script>
<script src="formkeyup.js"></script>
</head>
<body>
<div class="box"  >
<form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">

  <!-- user id -->
  <h2> Enter Info  </h2>
  <p> <span class="fieldName">UserID: </span>
  <input type="text" id="userid" name="userid" class="input">
  <span class="message"></span></p>

  <!-- -->
  <p style="text-align:center" class="types"> Enter Code: EECS, ESSE, MUTH, HIST, CHAP, BIO </p>
  <p> <span class="fieldName"> Codes </span>
  <input type="text" id="code" name="code" class="input">
  <span class="message"></span></p>

  <!-- Number -->
  <p> <span class="fieldName"> Course Num (XXXX): </span>
  <input style="width: 4em;" id="number" type="text" name="number" class="input">
  <span class="message"></span></p>
  <hr>
  <p style="text-align:center;">  <button  id="submitButton" type="button" onclick="submitbtn"> Submit </button> <input id="clear" type="reset" value="Clear"> </p>
  <p style="text-align:center;" id="formError"> &nbsp; <p>
</form>
</div>
</body>
</html>

JS: 

 window.onload = function() {


   $("userid").observe("keyup", enforceID);
   $("code").observe("keyup", enforcecode);
   $("number").observe("keyup", enforcenumbers);
   $("submitButton").observe("click", submitbtn);

}


function enforceID() {
  // fucntion must start with a letter and can be any number or letter after
  var re = /^[A-Z][A-Z][0-9]+/i;
}

function enforcecode() {
  // Only can use these Codes
  var codes = ["EECS", "ESSE", "MUTH", "HIST", "CHAP", "BIO"];
  var codeType = $("codeType").value;
  codeType = codeType.toUpperCase();
}

function enforcenumbers() {
  //Only 4 numbers allowed
  var re = /^[0 -9][0 -9][0 -9][0 -9]$/

}

1 Ответ

0 голосов
/ 12 ноября 2018

Вы можете запустить проверку формы при событии нажатия клавиши. 

const form = document.getElementById('form');

document.getElementById('userid').addEventListener('keydown', event => {
  form.reportValidity();
}, false);

document.getElementById('code').addEventListener('keydown', event => {
  form.reportValidity();
}, false);
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>

  <body>
    <form id="form">
      <label for="userid">User ID:</label>
      <input type="text" id="userid" name="userid" pattern="[A-Z]{2}\d+">
      <br />
      <label for="code">Code:</label>
      <input type="text" id="code" pattern="EECS|ESSE|MUTH|HIST|CHAP|BIO" />
    </form>
  </body>
</html>
...