使用JQuery进行表单验证不起作用

Question

我正在学习JQuery，我想在不使用bootstrap验证的情况下验证表单基本表单，在我的基本代码中，如果单击按钮，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. 按ID，选择器应为$("#Element_ID")
2. 按类，选择器应为$(".Element_ID")
3. 按名称，选择器应为$("Tag[name='Element_Name']")
4. 按标记，选择器应为$("Tag")
5. 按属性，选择器应为$("Tag[Attribute_Name='Attribute_Value']")

请查看下面的工作代码段。我已经纠正了选择器。

＆＃13;
＆＃13;
$(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;   
    }

  });

});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

tyr to this ...

＆＃13;

＆＃13;

$(document).ready(function(){

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

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

});

});

＆＃13;

.error{
  border:1px solid red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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');;
            }   
        });
    });
});