Jquery Alert框没有显示

时间:2016-10-26 15:10:19

标签: jquery

Jquery警告框不仅显示空名称,也不显示父姓名,电子邮件等。 当我点击提交按钮时,它会说,"请输入姓名",即使父姓名字段或电子邮件字段为空。

以下是代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>bem</title>
    </head>
    <body>
        <div class="header">
            <div class="header__left">
                <!-- Left column content -->
            </div>
            <div class="header__search">
                <!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? -->
            </div>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

让你开始吧。

基于您的示例

$('#txtName').val();
if (name == "") {
  alert("please enter the name");
  return  ;
}

&#34;名称&#34;没有定义。检查实际上没有做任何事情。

请注意:此示例不会检查此人是否已删除之前输入的内容。

&#13;
&#13;
$(document).ready(function () {
  var limit = 10;
  
  $("#btnSubmit").click(function () {
    var Name = $('#txtName').val();
    var FatherName = $('#txtFatherName').val();
    var CellNo = $('#txtCellNo').val();
    var Email = $('#txtEmail').val();
    var Address = $('#txtAddress').val();
    
    if (Name == "") {
      alert("please enter the name");
      return  ;
    } else if (FatherName == "") {
      alert("please enter ur father name");
      return;
    } else if (Email == "") {
      alert("please enter email");
      return;
    } else if (Address == "") {
      alert("please enter address");
      return;
    } else if (CellNo == "") {
      alert("please enter cell");
      return;
    }
  });
});
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<form id="form1" runat="server">
  <div id="personalInfo">
    <div>
      <div class="container">
        <h1>Personal Information</h1>
      </div>
      <br />
      <div class="row">
        <div class="col-sm-2 text-right">Name :</div>
        <div class="col-sm-4">
          <input type="text" id="txtName" class="cls1" name="txtName" size="20" />
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-sm-2 text-right">Father Name :</div>
        <div class="col-sm-4">
          <input type="text" id="txtFatherName" class="cls1" name="txtFatherName" size="20" />
        </div>
      </div>
      <br />
    </div>
    <div class=" row">
      <div class="col-sm-2 text-right">Email:</div>
      <div class="col-sm-4">
        <input type="text" id="txtEmail " class="cls1" name="txtEmail" size="20" />
      </div>
    </div>

    <div>
      <br />
      <div class="row">
        <div class="col-sm-2 text-right">Address</div>
        <div class="col-sm-4">
          <input type="text" id="txtAddress" class="cls1" name="txtAddress" size="20" />
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-sm-2 text-right">Cell No:</div>
        <div class="col-sm-4">
          <input type="text" id="txtCellNo" class="cls1" name="txtCellNo" size="20" />
        </div>
      </div>
      <br />

      <div class=" row">
        <div class=" col-sm-2 text-right"></div>
        <div class="col-sm-2">
          <button type="button" id="btnSubmit" class="btn btn-primary">Submit</button>
          <button type="button" id="btnCancel" class="btn btn-default">Cancel</button>
        </div>

      </div>
    </div>
  </div>
</form>
&#13;
&#13;
&#13;