Question

所以我正在使用bootstrap进行表单验证，但是当我点击提交我的提醒时，不要弹出。

我还没有收到所有警报。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="Viewport" content="width=device-width, initial-scale=1">

            <!--jquery-->
            <script src="https://code.jquery.com/jquery-latest.min.js">       </script>
            <!--ajax-->
            <script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

            <!-- Latest compiled and minified JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

            <script type="text/javascript" src="index.js"></script>


</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">My Form</div>
            <div class="panel-body">
                <form id="myForm" method="POST" class="form-horizontal" action="form.php">
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="first-name">First Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="first-name" name="first-name" placeholder="First Name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="lastName">Last Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name">
                        </div>
                    </div>
                   <div class="form-group">
                        <label class="col-md-2 control-label" for="email">Email</label>
                        <div class="col-md-4">
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                        </div>
                    </div> 
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="telephone">Telephone</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telephone">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="city">City</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="city" name="city" placeholder="City">
                        </div>
                    </div>
                     <div class="form-group">
                        <label class="col-md-2 control-label" for="zip">Zip Code</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="zip" name="zip" placeholder="Zip">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="state">State</label>
                        <div class="col-md-4">
                            <select class="form-control" id="state" name="state">
                                <option value="">Choose One</option>
                                <option value="1">New Jersey</option>
                                <option value="2">New York</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-2">
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

我做错了什么吗？或者有人知道如何使其发挥作用吗？

$(document).ready(function(){

$('#myform').submit(function(e){
    var firstName = $('#first-name').val();
    var pattern = /^$/;
    var lastName = $('#lastName').val();
    var telephone = /^$/;
    var zipCode = /^$/;
    var state = $('#state').val();
    var error = '';
    var emailPattern = /^[A-Za-z0-9.-]+@[A-Za-z0-9]+\.[A-Za-z]{2,4}$/;
    var email = $('#email').val();

    if(pattern.test(firstName)){
       error = 'Error: enter first name.\n';
    }
    if(pattern.test(lastName)){
       error = 'Error: enter last name.\n';
    }
    if(pattern.test(state)){
        error += 'Error: choose state.\n';
    }

    if(!emailPattern.test(email)){
        error += 'Errpr: Enter a valid email.\n';
    }

    if(error.length != 0){
        alert(error);
        e.preventDefault();
    }


});    
});

Answer 1

简单错字

id="myForm" !== "#myform"

所以

$('#myForm').submit(function(e){
      ^

姓氏的错误消息也应该是+=

为什么我的javascript警报不起作用？

1 个答案: