내 HTML 양식의 유효성을 검사하는 JavaScript 메서드를 가져올 수 없습니다.

debugcn 에 게시 Dev

Nauf

내 양식의 유효성을 검사하기 위해 자바 스크립트 메서드를 사용하려고하는데 작동하지 않는 것 같습니다. 빈 양식을 제출하더라도 오류를 경고하는 대화 상자가 나타나지 않습니다. 오류가 무엇일까요? (참고 : JS 파일에는 현재 내 양식 태그에서 사용하지 않는 타임 스탬프에 대해 정의 된 메서드가 있습니다. 두 함수를 호출하는 데 도움이 필요합니다.)

코드는 다음과 같습니다.

function setDate() {
  document.getElementById('date').value = new Date();

}

function validateForm() {
  var a = document.getElementById('name').value;
  var b = document.getElementById("contact1").value;
  var blen = b.length;
  var c = document.getElementById("address1").value;
  var d = document.getElementById("stblimit").value;
  var dlen = d.length;
  var e = document.getElementById("creditlimit").value;
  var f = document.getElementById("commission").value;
  var g = document.getElementById("servicecharges").value;
  //DATE var h = document.forms["addRetailer"]["date"].value;


  if (a == null || a == "") {
    alert("Name must be filled out");
    return false;
  } else if (b == null || b == "" || blen == 0 || blen > 10 || blen < 10) {
    alert("Enter a valid number");
    return false;
  } else if (c == null || c == "") {
    alert("Primary Address must be filled out");
    return false;
  } else if (d == null || d == "" || dlen == 0 || dlen < 0) {
    alert("Set Box Top Limit must be filled with a valid number");
    return false;
  } else if (e == null || e == "") {
    alert("Credit Limit must be filled out");
    return false;
  } else if (f == null || f == "") {
    alert("Commission Percentage must be filled out");
    return false;
  } else if (g == null || g == "") {
    alert("Service Charges must be filled out");
    return false;
  }

}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <script src="formvalidation.js" type="text/javascript"></script>
  <title>Register Retailer</title>
</head>

<body>
  <h1>Retailer Information</h1>
  <form name="addRetailer" action="RetailerController" method="post" onsubmit="return validateForm()">

    <table>

      <tr>
        <td>Name</td>
        <td>
          <input type="text" name="name" id="name"></input>
        </td>
      </tr>

      <tr>
        <td>Contact Number 1</td>
        <td>
          <input type="text" name="contact1" id="contact1"></input>
        </td>
      </tr>

      <tr>
        <td>Contact Number 2</td>
        <td>
          <input type="text" name="contact2" id="contact2"></input>
        </td>
      </tr>

      <tr>
        <td>Address Line 1</td>
        <td>
          <input type="text" name="address1" id="address1"></input>
        </td>
      </tr>

      <tr>
        <td>Address Line 2</td>
        <td>
          <input type="text" name="address2" id="address2"></input>
        </td>
      </tr>

      <tr>
        <td>City</td>
        <td>
          <input type="text" name="city" id="city"></input>
        </td>
      </tr>

      <tr>
        <td>State</td>
        <td>
          <input type="text" name="state" id="state"></input>
        </td>
      </tr>

      <tr>
        <td>Pin Code</td>
        <td>
          <input type="text" name="pin" id="pin"></input>
        </td>
      </tr>

      <tr>
        <td>Set Top Box Limit</td>
        <td>
          <input type="text" name="stblimit" id="stblimit" value="0"></input>
        </td>
      </tr>

      <tr>
        <td>Credit Limit</td>
        <td>
          <input type="text" name="creditlimit" id="creditlimit"></input>
        </td>
      </tr>

      <tr>
        <td>Commission Percentage</td>
        <td>
          <input type="text" name="commission" id="commission" value="0.0"></input>
        </td>
      </tr>

      <tr>
        <td>Service Charges</td>
        <td>
          <input type="text" name="servicecharges" id="servicecharges"></input>
        </td>
      </tr>

      <tr>
        <td>Date of Registration</td>
        <td>
          <input type="text" name="date" id="date"></input>
        </td>
      </tr>

      <tr>
        <td>&nbsp;</td>
        <td>
          <input type="hidden" value="registerCustomer" name="action"></input>
          <input type="submit" value="Register"></input>
        </td>
      </tr>

    </table>
  </form>
  <br>
  <br>Click

  <a href="mainPage.html"> Home </a>To Return To The Main Screen

</body>

</html>

편집하다:

다음은 내 Eclipse IDE 작업 공간의 스크린 샷입니다. 내 js 파일과 html 파일은 '웹 콘텐츠'에 있지만 동일한 하위 폴더에 없습니다. 그게 문제일까요?

Eclipse IDE 작업 공간의 스크린 샷

Rodinga

JS 파일을 제대로 연결하지 않았을 수 있습니다.

스크린 샷을 보면 웹 서버의 디렉토리에 대해 Unix 스타일 구문을 따르는 Tomcat 및 Java EE를 사용하고있는 것으로 나타났습니다.

귀하의 디렉토리 :

-Webcontent/
    -WEB-INF/
        +addRetailer
    -JavaScript/
        +validateForm.js

따라서 HTML 파일은 Webcontent 아래에있는 WEB-INF에 있고 양식 유효성 검사기는 javascript 아래에 있으며 webcontent 아래에도 있습니다.

이에 대한 세 가지 솔루션이 있습니다.

JavaScript 폴더를 WEB-INF로 이동하고 스크립트 참조를 "JavaScript / formvalidation.js"로 변경하십시오.
"../JavaScript/formvalidator.js"로 끝나야하는 이중 점 '..'을 사용하여 디렉토리 레이어를 '위로'점프하도록 스크립트 참조를 변경합니다.
대신 JavaScript가 필요없는 HTML5의 양식 유효성 검사를 사용하세요. 훨씬 깔끔합니다. Mozilla Dev Network에 대한 자세한 내용은 여기 에서 찾을 수 있습니다 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-6

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사