Home / Questions / 27772
Accepted
Pavlo B.
Asked: 2020-10-14 23:45:51 +0800 CST 2020-10-14 23:45:51 +0800 CST

用jquery检查输入是否为空

  • 772

我一直在为同一主题寻找很多问题，但我没有找到任何东西，所以我被迫制定一个新的......

我有这样的表格：

var value=$.trim($(".form-control").val());
if(value.length>0)
{
    $("#user-data-next-button").attr('disabled', true);
} else{
    $("#user-data-next-button").attr('disabled', false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="userdevdata.php" method="post">
	<label>Email</label>
	<input type="email" class="form-control" name="email"/>
	<label>Full name</label>
	<input type="text" class="form-control" name="name"/>
	<label>Address</label>
	<input type="text" class="form-control" name="address"/>
	<label>Postal code</label>
	<input type="number" class="form-control" name="cp"/>
	<label>City</label>
	<input type="text" class="form-control" name="city"/>
	<label>Province</label>
	<input type="text" class="form-control" name="province"/>
</form>
<button id="user-data-next-button" class="btn my-button" disabled="true" ><i class="glyphicon glyphicon-chevron-right"></i><i class="glyphicon glyphicon-chevron-right"></i></button>

我需要的是，只要我的表单的所有字段未完成，按钮就会被停用（禁用）。相反，当我完成所有表单域时，必须激活按钮 ( disabled="false") 才能单击。

     var userdevdata = 6;
 if($("#usermail").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#username").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#useraddress").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#usercp").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#usercity").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#userprovince").val().length > 0){ userdevdata = userdevdata-1;}
 if(userdevdata == 0){
     $('#user-data-next-button').attr('disabled', false);
 } else {
     $('#user-data-next-button').attr('disabled', true);
 }

我对这个评论不太好。我已经这样做了，它对我不起作用我不知道它是对还是错。

谢谢你。

jquery

5 Answers

  1. Best Answer

    为此，您需要知道表单的每个输入中的字符长度。

    根据您的HTML，我包含一个小型jQuery脚本，可让您执行此操作：

    $(document).ready(function() {
    //Siempre que salgamos de un campo de texto, se chequeará esta función
    $("#form input").keyup(function() {
        var form = $(this).parents("#form");
        var check = checkCampos(form);
        if(check) {
            $("#user-data-next-button").prop("disabled", false);
        }
        else {
            $("#user-data-next-button").prop("disabled", true);
        }
    });
});

//Función para comprobar los campos de texto
function checkCampos(obj) {
    var camposRellenados = true;
    obj.find("input").each(function() {
    var $this = $(this);
        if( $this.val().length <= 0 ) {
            camposRellenados = false;
            return false;
        }
    });
    if(camposRellenados == false) {
        return false;
    }
    else {
        return true;
    }
}

    您必须向表单或类添加一个 ID，并在代码中对其进行更改。

    粗略地说，这段代码的作用是查找所有输入字段并检查它们的长度是否大于 0（您输入了一些内容），如果所有字段都已填写，则它会从按钮中删除 disabled 属性。

    我已经添加了一个指向jsFiddle的链接，以防你需要弄乱它。

    • 6

  2. 只要字段不为空，您就可以创建一个等于您拥有的字段数的数值变量。

    if($("#nombre").val().length > 0)

    你从数值变量中减去 1 并检查它是否等于 0。如果它等于零，则删除禁用。

    • 1

  3. 最直接的方法是询问每个字段是否已填写，如果为空，则将其存储在变量中并根据其值显示或不显示按钮。...

    表单添加 id

    input type="email" class="form-control" name="email" id="email"/>

    ... 使用 jquery 作为表单字段

    var contador=0
    if ($("#email").val().length<1) {contador=1}

    或者

    if ($("#email").val()=="") {contador=1}

if (contador==0) {//muestras el botón}
else {//no muestras el botón}

    如果您要求对所有字段通用的类，它将只取一个字段的值，而不是所有字段的值。

    • 0

  4. 您可以使用该事件input进行检查：

    $('input').on('input', function(){
  
    $('input').each(function() {
      
      var boton      = $( '#user-data-next-button' );
      var esta_vacio = $( this ).prop( 'value' ) === '';
      
      boton.prop('disabled', esta_vacio);        
    });
});

$('button').on('click', function(){  
  console.log('Enviado!!');
});
    input{display:block}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>Email</label>
	<input type="email" class="form-control" name="email"/>
	<label>Full name</label>
	<input type="text" class="form-control" name="name"/>
	<label>Address</label>
	<input type="text" class="form-control" name="address"/>
	<label>Postal code</label>
	<input type="number" class="form-control" name="cp"/>
	<label>City</label>
	<input type="text" class="form-control" name="city"/>
	<label>Province</label>
	<input type="text" class="form-control" name="province"/>
</form>  
<button id="user-data-next-button" class="btn my-button" disabled>Enviar</button>

    • 0 
  5. var $inputs = $('#SignupForm').find('table').children().find(':input[type="text"]') //INPUTS
var $selects = $('#SignupForm').find('table').children().find('select') //SELECTS

$inputs.each(function(index, element) {
    if ($(element).val().length <= 0) {
            $(element).css("border", "solid 2px #FA5858");
    }
});

$selects.each(function(index, element) {
    if ( $(element).val() ==0) {
            $(element).css("border", "solid 2px #FA5858");
    }
});
    • 0