防止默认作为表单验证的一部分JQuery

时间:2016-05-12 22:42:29

标签: javascript jquery forms

我正在尝试验证此处的表单。

<form action="action.php" method="post" id="bandForm">
                <div class="form-group">
                    <br  />
                    <label for="bandName" class="control-label">Band Name</label>
                    <input type="text" class="form-control" name="bandName" id="bandName"><br  /><br  />
                    <label for="genre">Genre</label>
                    <select name="genre" id="genre">
                              <option value="Pop">Pop</option>
                              <option value="Rock">Rock</option>
                              <option value="Folk">Folk</option>
                              <option value="Metal">Heavy Metal</option>
                            </select><br  /><br  />
                    <label for="video">Enter the URL for one of your youTube videos</label>
                    <input type="text" class="form-control" name="video" id="video"><br  />
                    <label for="bio">Biography</label>
                    <textarea rows="5" columns="4" class="form-control" name="bio" id="bio"></textarea>
                    </fieldset><br  />

                    <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                </div>
                </form>

我正在尝试做的是,如果任何字段为空,则表单不会发送,并显示错误消息。当然,如果所有内容都已填写,那么我希望表单提交。这是JQuery:

$(document).ready(function(){
    $("#bandForm").submit(function(e){

     var errorMessage="";

     if($('#bandName').val() == ''){
        errorMessage="<br />Please enter a band name";
     }

     if($('#video').val() == ''){
        errorMessage=errorMessage+"<br />Please enter the URL of one of your band's YouTube videos";
     }

     if($('#bio').val() == ''){
        errorMessage=errorMessage+"<br />Please enter a band biography";
     }
     if (!errorMessage=="") {

      $("#error").html(errorMessage);
      e.preventDefault();  

      }

    });
  });

无论我做什么,表格似乎都会提交。任何帮助将不胜感激

0 个答案:

没有答案