CODEWITHSUNDEEP
javascripthtmlvalidation
Thisura
Thisura

Reputation: 40

I am trying to validate a simple html form

I am creating a library management system and I can't validate the HTML(To add a book copy to the library) with javaScript. I will be uploading the HTML and JS files. When I click on submit I am redirected to the librarian's dashboard. It would be a great help if you could help out with the code.

var btnSubmit = document.getElementById("btn-submit");

btnSubmit.addEventListener("click", function(e) {
  e.preventDefault();
  validate(e);
});

function validate(e) {
  var numbers = /[^0-9]/;
  var isbn = document.getElementById("isbn").value;
  var copies = document.getElementById("copies").value;

  if (isbn.length != 13) {
    alert("Please enter a valid ISBN Number");
  } else if (isbn.match(numbers)) {
    alert("Please enter a valid ISBN Number");
  } else if (copies == "") {
    alert("Please fill in the number of copies");
  } else if (copies.match(numbers)) {
    alert("Please enter a valid number of copies");
  }
}

<!doctype html>
<html>

<head>
    <title>Add Book Copy</title>
    <link rel="stylesheet" href="../fonts/fonts.css" />
    <link rel="stylesheet" href="../style/style.css" />
    <link rel="stylesheet" href="../style/librarian.css">
    <link rel="stylesheet" href="../style/add_book.css">
</head>

<body>

    <header>
        <h2><a href="librarian.html">Librarian</a></h2>
        <form action="../admin/logout.php" method="post">
            <input type="submit" id="btn-logout" value="Logout">
        </form>
        <br style="clear: both" />
    </header>

    <form action="../admin/add_book_copy.php" method="post">

        <h2>Add Book Copy</h2>

        <input type="text" name="copyId" placeholder="Book Copy Id" />
        <input type="text" name="isbn" placeholder="ISBN" />
        <input type="text" name="date" id="date" hidden />
        <input type="submit" value="submit" id="btn-submit" />
    </form>
<script src="../js/add_book_copy.js">   </script>
</body>

</html>

Upvotes: 1

Views: 225

Answers (3)

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4004

You did not give id to <input>:

<input type="text" name="copyId" placeholder="Book Copy Id" id="copies"/>
<input type="text" name="isbn" placeholder="ISBN" id="isbn"/>

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You can simply add the pattern attribute in the input tag 

<input type="text" name="copyId" placeholder="Book Copy Id" pattern="[0-9]+" />
        <input type="text" name="isbn" placeholder="ISBN"  pattern="[0-9]{13}"/>
        <input type="text" name="date" id="date" hidden />
        <input type="submit" value="submit" id="btn-submit" />

With the help of this , you will not need the javascript function .

Upvotes: 1

Swati
Swati

Reputation: 28522

You have not given id to your input's i.e : isbn and copies that's the reason it is not working .I have given id to input boxes .i.e : 

var btnSubmit = document.getElementById("btn-submit");

btnSubmit.addEventListener("click", function(e) {
  e.preventDefault();
  validate(e);
});

function validate(e) {
  var numbers = /[^0-9]/;
  //you are getting values by using id give input id attribute as well
  var isbn = document.getElementById("isbn").value;
  var copies = document.getElementById("copies").value;

  if (isbn.length != 13) {
    alert("Please enter a valid ISBN Number");
  } else if (isbn.match(numbers)) {
    alert("Please enter a valid ISBN Number");
  } 
  if (copies == "") {
    alert("Please fill in the number of copies");
  }  
  else if (copies.match(numbers)) {
    alert("Please enter a valid number of copies");
  }
}
<!doctype html>
<html>

<head>
    <title>Add Book Copy</title>
    <link rel="stylesheet" href="../fonts/fonts.css" />
    <link rel="stylesheet" href="../style/style.css" />
    <link rel="stylesheet" href="../style/librarian.css">
    <link rel="stylesheet" href="../style/add_book.css">
</head>

<body>

    <header>
        <h2><a href="librarian.html">Librarian</a></h2>
        <form action="../admin/logout.php" method="post">
            <input type="submit" id="btn-logout" value="Logout">
        </form>
        <br style="clear: both" />
    </header>

    <form action="../admin/add_book_copy.php" method="post">

        <h2>Add Book Copy</h2>
      <!--added id-->
        <input type="text" name="copyId" id="copies" placeholder="Book Copy Id" />
        <input type="text" name="isbn" id="isbn" placeholder="ISBN" />
        <input type="text" name="date" id="date" hidden />
        <input type="submit" value="submit" id="btn-submit" />
    </form>
<script src="../js/add_book_copy.js">   </script>
</body>

</html>

Upvotes: 1

Related Questions