validate form with Javascript

1

I'm trying to validate a <form> with JavaScript, but the code I've created is not doing anything. seems to me correct.

HTML code

<form name="ContactForm" action="addDataAdmin.php" method="POST" enctype="multipart/form-data" autocomplete="off" onsubmit="return ValidateContactForm();">
  <p>ISBN</p> <input type="text" name="ISBN">
  <p>Author's Name</p> <input type="text" name="Authorsname">
  <p>Title</p> <input type="text" name="Title">
  <p>Edition</p> <input type="text" name="edition">
  <p>Year</p> <input type="text" name="year">

  <p>Category</p>
  <select name="category" size="1">
      <option value="computing">Computing</option>
      <option value="Romance">Romance</option>
      <option value="Fiction">Fiction</option>
      <option value="Non-Fiction">Non-Fiction</option>
  </select>
  <br />

  <p>Publisher</p> <input type="text" name="publisher">
  <p>Quantity-in-stock</p> <input type="text" name="quantityinstock">
  <p>Price</p> <input type="text" name="price">
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit" formaction="/upload.php">
  <input type="submit" value="Send" name="send">
  <input type="reset" value="Clear">
</form>

Script

function ValidateContactForm()
{
    var ISBN = document.ContactForm.ISBN;
    var Authorsname = document.ContactForm.Authorsname;
    var Title = document.ContactForm.Title; 
    var edition = document.ContactForm.edition;
    var year= document.ContactForm.year;
    var category = document.ContactForm.category;
    var publisher = document.ContactForm.publisher;
    var quantityinstock= document.ContactForm.quantityinstock;
    var price = document.ContactForm.price;
}

if (ISBN.value == "")
{
    window.alert("Please enter ISBN.");
    ISBN.focus();
    return false;
}
    
asked by anonymous 20.04.2017 / 20:17

2 answers

1

The key that closes the ValidateContactForm function is in the wrong place.

This if (ISBN.value == "") is lost in the code, it should be within the function that performs the validation.

See it working (I took a lot of the code for readability).

function ValidateContactForm()
{
    var ISBN = document.ContactForm.ISBN;
    
    if (ISBN.value == "")
    {
        window.alert("Please enter ISBN.");
        ISBN.focus();
        return false;
    }
}
<form name="ContactForm" method="GET" onsubmit="return ValidateContactForm();">
  <p>ISBN</p> <input type="text" name="ISBN">
  
  <input type="submit" value="Send" name="send">
</form>
    
20.04.2017 / 20:26
0

If you want, you can use the jQuery Validation plugin.

To use you would only have to download the plugin, call it on your HTML page and configure:

<form name="ContactForm" id="ContactForm" action="addDataAdmin.php" method="POST" enctype="multipart/form-data" autocomplete="off">
  <p>ISBN</p> <input type="text" name="ISBN">
  <p>Author's Name</p> <input type="text" name="Authorsname">
  <p>Title</p> <input type="text" name="Title">
  <p>Edition</p> <input type="text" name="edition">
  <p>Year</p> <input type="text" name="year">

  <p>Category</p>
  <select name="category" size="1">
      <option value="computing">Computing</option>
      <option value="Romance">Romance</option>
      <option value="Fiction">Fiction</option>
      <option value="Non-Fiction">Non-Fiction</option>
  </select>
  <br />

  <p>Publisher</p> <input type="text" name="publisher">
  <p>Quantity-in-stock</p> <input type="text" name="quantityinstock">
  <p>Price</p> <input type="text" name="price">
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit" formaction="/upload.php">
  <input type="submit" value="Send" name="send">
  <input type="reset" value="Clear">
</form>

<script src="https://code.jquery.com/jquery.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script><script>$("#ContactForm").validate({
    rules: {
        ISBN: "required",
        Authorsname: "required",
        Title: "required",
        edition: "required",
        year: {
            required: true,
            minlength: 4
        },
        category: "required",
        publisher: "required",
        quantityinstock: "required",
        price: "required"
    },
    messages: {
        ISBN: "Informe o ISBN",
        Authorsname: "Informe o nome do Autor",
        Title: "Informe o Título",
        edition: "Informe a Edição",
        year: {
            required: "Informe o ano",
            minlength: "O ano deve ser de 4 digitos"
        },
        category: "Escolha uma categoria",
        publisher: "Informe a editora",
        quantityinstock: "Informe a quantidade em Estoque",
        price: "Informe o Preço"
    }
});
</script>
    
20.04.2017 / 20:43