javascript - 表单验证不适用于所有字段，但仅适用于第一个字段

Question

当我发布表单时，只有标题验证有效，其他两个字段未验证。

HTML

<form name="qaform" class="nice" method="POST" onsubmit="validateForm()" action="/ask/ask-question/">

            <input type="hidden" id="id_selected_tags" name="tags">
            <p>
                <label for="id_title" class="inline-block">Title</label>
                <input type="text" class="input-text inline-block" id="id_title" name="question_title">
            </p>
            <span id="error_title"></span>

            <textarea id="id_question" name="question_description" class="full-width"></textarea>
            <span id="error_body"></span>
            <p>
                <label for="id_tags" class="inline-block">Tags</label>
                <input type="text" id="id_newstagbox" name="question_tags"/>
            </p>
            <span id="error_tags"></span>

            <button class="btn btn-success" type="submit">Post your question</button>
</form>

JS

function validateForm()
{
//title validation

if (document.qaform.question_title.value == "") {
     document.getElementById('error_title').innerHTML="*Please add a title*";
      return false;
 }


//body validation
if (document.qaform.question_description.value == "") {
     document.getElementById('error_body').innerHTML="*Please add a description*";
     return false;
}

//tag validation
if (document.qaform.question_tags.value == "") {
     document.getElementById('error_tags').innerHTML="*Please add a description*";
     return false;
}

}

如果标题存在，则成功提交表单后。

stackoverflow 表单验证迫使我这样做，它不断告诉我添加更多文本，因为我的问题主要包含代码。我知道提供有关问题的更多信息很好，但有时你可以用几句话问一个问题而不被太宽泛了，然后您必须对其进行咆哮才能通过表格验证。

Answer 1

只需删除return false.modify 如下所示

<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
var y=document.forms["myForm"]["farea"].value;
var z=document.forms["myForm"]["ftag"].value;
if (x==null || x=="")
  {
   document.getElementById('ern').innerHTML="*Please add a title*";

  }
if (y==null || y=="")
  {
   document.getElementById('era').innerHTML="*Please add a desxription*";

  }
if (z==null || z=="")
  {
   document.getElementById('ert').innerHTML="*Please add a tag*";

  }
}
</script>

Answer 2

您只需删除您的return false内部每个条件， 检查这个jsfiddle如果您删除 return false line ，它是如何工作的。

注意：返回 false 将在那里停止你的执行

Answer 3

我更喜欢使用 jQuery：

$('#form').submit(function(e) {
        var validated = true;
        e.preventDefault();

        //title validation
        if ($('#id_title').val() == "") {
            $('#error_title').html("*Please add a title*");
            validated = false;
         }

        //body validation
        if ($('#id_question').val() == "") {
            $('#error_body').html("*Please add a description*");
            validated = false;
        }

        //tag validation
        if ($('#id_newstagbox').val() == "") {
            $('#error_tags').html("*Please add a description*");
            validated = false;
        }

        if(validated) {
            $(this).unbind('submit').submit();
        }
    });

Answer 4

删除 if 子句中的“return false”。这会停止您的函数，并且不会调用其他 if 子句。

Answer 5

只需在 validateform() 之前添加 'return' 关键字

像这样

<form name="qaform" class="nice" method="POST" onsubmit="return validateForm()" action="/ask/ask-question/">

Answer 6

尝试对您的 validateForm 方法进行这 5 个小改动 -

function validateForm() {
  var valid = true; // 1
  //title validation
  if (document.qaform.question_title.value == "") {
     document.getElementById('error_title').innerHTML="*Please add a title*";
     valid = false; // 2
  }

  //body validation
  if (document.qaform.question_description.value == "") {
     document.getElementById('error_body').innerHTML="*Please add a description*";
     valid = false; // 3
  }

  //tag validation
  if (document.qaform.question_tags.value == "") {
     document.getElementById('error_tags').innerHTML="*Please add a description*";
     valid = false; // 4
  }
  return valid; // 5
}

Answer 7

我认为它只验证第一个的原因是因为你返回 false 以退出验证函数，如果你在所有 if 循环之后执行 return false 我认为它会做你想要的。