Question

我一直在寻找关于如何做到这一点的不同主题，并将以下脚本放在一起，但是，即使我输入输入所以它们不是空的，我也会弹出警报并显示表单不提交。

任何人都可以看到我做错了什么，或者是否有更简单/更有效的方式来做这件事？

谢谢，

大须

HTML：

<form action="#" method="post" class="signup-form">
    <div class="required">
        <label for="name">Name:</label>
        <input type="text" name="cm-name" id="name" value=""><br />
    </div>
    <div class="required">
        <label for="asd-asd">Email:</label>
        <input type="text" name="cm-asd" id="asd-asd" value="">
        <span class="btn"><input type="submit" name="submit" value="" id="signup"></span>
    </div>          
</form>

JS：

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

Answer 1

感谢您的回答，但是，我发现我收到错误消息的原因是因为提交按钮没有值，即值=“”，所以它也检查了输入。为了纠正这个问题，我必须确保提交功能只检查'文本'输入类型：

新JS：

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input:text").each(function(){ // Note the :text
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

Answer 2

 $('#signup').click(function(event) {

 event.preventDefault(); 
//validate and if it is valid serialize the form
//else alert and return


var isFormValid = true;
    $(".signup-form .required input").each(function(index, value){
        if ($.trim($(value).val()).length == 0){
            $(value).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(value).parent().removeClass("highlight");
        }
    });

if(isFormValid ){
   $.post( 'validation.php', $('.signup-formt').serialize(), function( data ) {

  });
}else{
  alert("Please fill in all the required fields (highlighted in red)");
}
 });

Answer 3

$('input').each(function(index, obj){
    if($(obj).val().length === 0) {
        $(obj).addClass('error');
    }
});

但我不记得是 obj 还是这个。

Answer 4

.each多次运行脚本。例如，如果您有3个空输入，则您使用的脚本会添加类.highlight 3次。如果你想让你的页面保持清洁和干净，请将脚本放在下面。

check = function()
    {                
var empty = $(".signup-form .required input").filter(function() {
return this.value == ""; });//this checks if 1 or more inputs have no value
if(empty.length) {//to be applied if at least 1 input has no value
alert("Please fill in all the required fields (highlighted in red)");
$(".signup-form").addClass("highlight");
}else{
$(".signup-form").removeClass("highlight");
};}

如果至少有一个输入为空，这将提示消息ONCE。然后只需将函数onclick添加到您的提交输入或任何要用表单验证表单的按钮。

<input type="submit" value="submit" onclick="check();">

提交前jQuery检查输入不为空

4 个答案: