NemoBlack NemoBlack - 1 month ago 7
HTML Question

Form validation with JQuery not work

I'm learning JQuery, I want to validate a form basic form without using bootstrap validation, in my basic code, JQuery not detect anything when if I click on the button.

JQuery

<script>
$(document).ready(function(){

$("agregar_proveedor").click(function(e) {

var name = $('nombre_proveedor').val();

if(name=="") {
$("nombre_empresa").attr("placeholder", "Ingrese nombre").placeholder();
$("form_group_nombre").addClass('has error');
e.preventDefault();
return false;
}

});

});
</script>


HTML

<div class="panel contenedor panel-default">
<div class="panel-heading">Agregar Proveedor</div>
<div class="panel-body">
<form action="?proveedores" method="POST" name="form_proveedores" class="form-horizontal">
<fieldset>
<legend>Datos</legend>
<div class="form-group" name="form_group_nombre">
<label for="inputNombre" class="col-lg-2 control-label">Nombre empresa</label>
<div class="col-lg-10">
<input class="form-control" id="inputNombre" placeholder="Ingrese nombre empresa" type="text" name="nombre_empresa">
</div>
</div>
<div class="form-group">
<label for="inputDireccion" class="col-lg-2 control-label">Direccion</label>
<div class="col-lg-10">
<input class="form-control" id="inputDireccion" placeholder="Ingrese direccion" type="text" name="direccion">
</div>
</div>
<div class="form-group">
<label for="inputTelefono" class="col-lg-2 control-label">Telefono</label>
<div class="col-lg-10">
<input class="form-control" id="inputTelefono" placeholder="Ingrese telefono" type="text" name="telefono">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary center-block" name="agregar_proveedor">Agregar</button>
</div>
</fieldset>
</form>
</div>
</div>


How do I fix this?

Answer

Please look at your selector.

  1. By id the selector should be $("#Element_ID")
  2. By class the selector should be $(".Element_ID")
  3. By name the selector should be $("Tag[name='Element_Name']")
  4. By tag the selector should be $("Tag")
  5. By attribute the selector should be $("Tag[Attribute_Name='Attribute_Value']")

Please check below working snippet. I have corrected selectors in it.

$(document).ready(function(){

  $("button[name='agregar_proveedor']").click(function(e) {

    var name = $('#inputNombre').val();

    if(name=="") {
      $("#inputNombre").attr("placeholder", "Ingrese nombre");
      $("form[name='form_proveedores']").addClass('has error');
      e.preventDefault();
      return false;   
    }

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel contenedor panel-default">
  <div class="panel-heading">Agregar Proveedor</div>
  <div class="panel-body">
    <form action="?proveedores" method="POST" name="form_proveedores" class="form-horizontal">
      <fieldset>
        <legend>Datos</legend>
        <div class="form-group" name="form_group_nombre">
          <label for="inputNombre" class="col-lg-2 control-label">Nombre empresa</label>
          <div class="col-lg-10">
            <input class="form-control" id="inputNombre" placeholder="Ingrese nombre empresa" type="text" name="nombre_empresa">
          </div>
        </div>
        <div class="form-group">
          <label for="inputDireccion" class="col-lg-2 control-label">Direccion</label>
          <div class="col-lg-10">
            <input class="form-control" id="inputDireccion" placeholder="Ingrese direccion" type="text" name="direccion">
          </div>
        </div>
        <div class="form-group">
          <label for="inputTelefono" class="col-lg-2 control-label">Telefono</label>
          <div class="col-lg-10">
            <input class="form-control" id="inputTelefono" placeholder="Ingrese telefono" type="text" name="telefono">
          </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary center-block" name="agregar_proveedor">Agregar</button>
        </div>
      </fieldset>
    </form>        
  </div>
</div>