1

Estou tentando validar um <form> com JavaScript, mas o código que criei não está fazendo nada. me parece correto.

Código HTML

<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;
}
0

2 Respostas 2

1

A chave que fecha a função ValidateContactForm tá no lugar errado.

Este if (ISBN.value == "") tá perdido no código, ele deveria estar dentro da função que faz a validação.

Veja funcionando (tirei boa parte do código pra facilitar a leitura).

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>

5
  • Obrigado jbueno ta funcionando :) Commented 20/04/2017 às 18:52
  • @DianaMadeira Às ordens
    – Jéf Bueno
    Commented 20/04/2017 às 18:52
  • jbueno, se quero apenas que numeros sejam introduzidos na textbox faço da seguinte maneira ? if (year.value == "") { isNaN( document.myForm.edition.value) window.alert("Please enter year."); year.focus(); return false; } Commented 20/04/2017 às 18:55
  • Bem, existem algumas maneiras melhores de se fazer isso, @DianaMadeira
    – Jéf Bueno
    Commented 20/04/2017 às 18:57
  • Se quiser, pode abrir outra pergunta especificamente sobre isto.
    – Jéf Bueno
    Commented 20/04/2017 às 18:57
0

Caso você queira, pode-se usar o plugin jQuery Validation.

Para usar você só teria fazer o download do plugin, chamar ele em sua página HTML e configurar:

<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>
<script src="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>
1
  • também é uma boa ideia. Obrigado Alisson Commented 20/04/2017 às 19:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .