Проверка формы с помощью JQuery не работает

Question

Я изучаю JQuery, я хочу проверить базовую форму формы, не используя проверку начальной загрузки, в моем базовом коде JQuery не обнаруживает ничего, если я нажимаю на кнопку.

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> 

Как это исправить?

Answer 1

Посмотрите на свой селектор.

1. По идентификатору селектор должен быть $("#Element_ID")
2. К классу селектор должен быть $(".Element_ID")
3. По имени селектор должен быть $("Tag[name='Element_Name']")
4. По тегу селектор должен быть $("Tag")
5. По атрибуту селектора должно быть $("Tag[Attribute_Name='Attribute_Value']")

Пожалуйста, проверьте ниже рабочий фрагмент. Я исправил селектора в нем.

$(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>

Answer 2

Ваш селекторы неправильно. Используйте . для селектора классов, # для id селектор. Итак, нажмите прослушиватель, как показано ниже.

$(".btn").click(function(e) { 
var name = $('#inputNombre').val(); 
... 

Answer 3

Проблема в том, что вы не присоединяете события или не определяете свои элементы надлежащим образом. Я вижу, что вы дали agregar_proveedor, который является name для вашей кнопки. Существует много способов идентификации элементов. то есть идентифицируют с помощью id, который использует "#" - $("#elementID"), идентифицируя с использованием class, который использует "." - $(".elementClassName") и с именем или аналогичными атрибутами. В основном это полезно использовать с id или class. Поскольку вы пытаетесь с name, вы должны прикреплять его как $('button[name="agregar_proveedor"]'). Ниже приведено обновление для вашего кода.

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

    var name = $('nombre_proveedor').val(); 
    if(name=="") { 
     $('input[name="nombre_empresa"]').attr("placeholder", "Ingrese nombre"); 
     //You can replace with $("#inputNombre") i.e. getting element with its "id" 
     $('form[name="form_group_nombre"]').addClass('has error'); 
     e.preventDefault(); 
     return false; 
    } 
}); 

Answer 4

Тир к этому ...

$(document).ready(function(){ 
 

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

 
    var name = $('#inputNombre').val(); 
 
    
 
    if(name=="") { 
 
     $(".form-control").addClass('has error'); 
 
     e.preventDefault(); 
 
     return false; 
 
    } 
 

 
}); 
 

 
});

.error{ 
 
    border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/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" id="agregar_proveedor" name="agregar_proveedor">Agregar</button> 
 
     </div> 
 
     </fieldset> 
 
    </form>   
 
    </div> 
 
</div>

Answer 5

$(document).ready(function(){ 
    $("button[name='agregar_proveedor']").click(function(e) { 
     $('.form-horizontal input').map(function(){ 
      if(!$(this).val()) { 
       $(this).css('border-color', 'red'); 
      } 
      else if ($(this).val()) { 
       $(this).css('background-color:none');; 
      } 
     }); 
    }); 
});