1
因此，我正在使用引導程序進行表單驗證，但是當我單擊提交時，我的警報不會彈出。爲什麼我的javascript警報不工作？
我還沒有所有的警報。
<!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.-][email protected][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();
}
});
});
是包裹着'$（文件）。就緒代碼（{/ *把你的代碼放在這裏* /}）;'？ – jpaljasma
是的。出於某種原因，當我把它放在這裏時，它被切斷了。 – Guy
另外，你正在加載到不同版本的jQuery。你應該刪除jQuery.latest，因爲這是更新的版本。 –