Question

当我运行register.html，并单击注册按钮而不在clist中选择任何内容时，它应显示errorbox div并保留在页面上，直到我再次单击注册按钮。但是发生了什么，错误框div显示了一秒钟然后消失了。任何人都可以打电话给我，就是这种情况发生了。

register.js

    $(document).ready(function(){
     $("#reg").click(function(){

if($('#clist option:selected').text()=='Select...')
{
    $("#errorBox").html("Please fill in all the fields. All the * marked fields are123 important");

}
//$('#ddlList option:selected').text()
     });
});

registration.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>JobSeeker Registration Page </title>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="ex.js"></script>
  </head>
  <body>
<div id="errorBox"></div>
<form  class="form-horizontal" role="form" method="POST" action="#">

<div class="page-header paddi">
<h4>
Create Login Details
</h4>
</div>
<div class="form-group row">

<label class="control-label col-md-3 text-right" for="email"> Enter your Email id<sup>*</sup>:
</label>

<div class="col-md-7">
<input type="text" name="eml" id="eml" />
</div>
</div>

<div  class="form-group">
<label class="control-label col-md-3 text-right" for="clist">
Where are you currently located<sup>*</sup>: 
</label>
<div class="col-md-7">
<select id="clist">
<option value="">Select...</option>
<option value="Sweden"> India </option>
<option value="Denmark"> USA </option>
<option value="Norway"> Norway </option>
<option value="Finland"> Finland </option>
<option value="Iceland"> Iceland </option>
</select>

</div>

</div>
<div class="control-group">
                                <!-- Button -->
                                <div class="controls col-md-offset-3 col-md-2">
                                    <button class="btn btn-success" id="reg">Register</button>
                                </div>
</div>
</form>
</body>
</html>

Answer 1

您的表单正在提交

将event.preventDefault()添加到您的点击处理程序以使其正常工作

$(document).ready(function () {
    $("#reg").click(function () {
        event.preventDefault();
        if ($('#clist option:selected').text() == 'Select...') {
            $("#errorBox").html("Please fill in all the fields. All the * marked fields are123 important");

        }
        //$('#ddlList option:selected').text()
    });
});

Answer 2

在我看来，无论如何都会提交form。将e.preventDefault放在click函数中，e作为此回调的参数。

$('#reg').click(function (e) {
    if ($('#clist option:selected').text() == 'Select...') {
        $('#errorBox').html('Please fill in all the fields. All the * marked fields are123 important');
        e.preventDefault();
    }
});

错误框div正在进行中

2 个答案: