Bootstrap验证器问题与提交按钮

时间：2018-02-20 17:52:25

标签： javascript jquery twitter-bootstrap validation

我遇到了Bootstrap Validator的问题。出于某种原因，即使每个字段都正确，我也无法使提交按钮起作用。当所有内容都填写完后单击按钮时，会在其上显示错误图标。任何想法为什么会这样？我尝试了一些不同的事情但没有成功。我不确定这是否是我所做的事情，但我很确定我正在按照应有的方式遵循文档。如果有人可以看一下，我将不胜感激。谢谢！

//If hash is detected from another page
$(document).ready(function() { 
   if ( window.location.hash == "#recipe" ) {   
		$('#recipeQuestions').trigger('click');
   }
});

<!-- Recipe Form Validation -->
	$(document).ready(function() {
    $('#recipeForm').bootstrapValidator({ 
        container: '#messagesRecipe',
        //feedbackIcons: {
            //valid: 'glyphicon glyphicon-ok',
            //invalid: 'glyphicon glyphicon-remove',
            //validating: 'glyphicon glyphicon-refresh'
        //},
		live: 'enabled',
        fields: { 
            firstName: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your first name'
                    }
                }
            },
			lastName: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your last name'
                    }
                }
            },
			street1: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your street address'
                    }
                }
            },
			city: {
                validators: {
                    notEmpty: {
                        message: 'Please enter a city'
                    }
                }
            },
			state: {
                validators: {
                    notEmpty: {
                        message: 'Please enter a state'
                    }
                }
            },
			zip: {
                validators: {
                    notEmpty: {
                        message: 'Please enter a zip code'
                    }
                }
            },
			phone: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your phone number'
                    }
                }
            },
			email: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your email address'
                    }
                }
            },
			recipeName: {
                validators: {
                    notEmpty: {
                        message: 'Please enter a recipe name'
                    }
                }
            },
			recipeOrigin: {
                validators: {
                    notEmpty: {
                        message: 'Please enter origin of recipe'
                    }
                }
            }
		    }
    })
});     
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap Validator CSS -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Bootsrap Validator Javascript -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

<!-- RECIPE FORM Start -->
            <div id="recipeForm" class="col-md-12">
                <span id="recipe"></span>
				<div class="container">
					<div class="col-md-12">
				  		<h1>RECIPE QUESTION</h1>
						
						<form class="recipeForm" method="POST">

							<div class="form-group"> <!-- First Name -->
								<label for="first_name_id" class="control-label">First Name</label>
								<input type="text" class="form-control" name="firstName" placeholder="John">
							</div>	
							
							<div class="form-group"> <!-- Last Name -->
								<label for="last_name_id" class="control-label">Last Name</label>
								<input type="text" class="form-control" name="lastName" placeholder="Doe">
							</div> 

							<div class="form-group"> <!-- Street 1 -->
								<label for="street1_id" class="control-label">Street Address 1</label>
								<input type="text" class="form-control" name="street1" placeholder="Street address, P.O. box, company name, c/o">
							</div>					

							<div class="form-group"> <!-- Street 2 -->
								<label for="street2_id" class="control-label">Street Address 2</label>
								<input type="text" class="form-control" name="street2" placeholder="Apartment, suite, unit, building, floor, etc.">
							</div>	

							<div class="form-group"> <!-- City-->
								<label for="city_id" class="control-label">City</label>
								<input type="text" class="form-control" name="city" placeholder="Birmingham">
							</div>									

							<div class="form-group"> <!-- State Button -->
								<label for="state_id" class="control-label">State</label>
								<select class="form-control" name="state">
									<option value=""></option>
									<option value="AL">Alabama</option>
									<option value="AK">Alaska</option>
									<option value="AZ">Arizona</option>
									<option value="AR">Arkansas</option>
									<option value="CA">California</option>
									<option value="CO">Colorado</option>
									<option value="CT">Connecticut</option>
									<option value="DE">Delaware</option>
									<option value="DC">District Of Columbia</option>
									<option value="FL">Florida</option>
									<option value="GA">Georgia</option>
									<option value="HI">Hawaii</option>
									<option value="ID">Idaho</option>
									<option value="IL">Illinois</option>
									<option value="IN">Indiana</option>
									<option value="IA">Iowa</option>
									<option value="KS">Kansas</option>
									<option value="KY">Kentucky</option>
									<option value="LA">Louisiana</option>
									<option value="ME">Maine</option>
									<option value="MD">Maryland</option>
									<option value="MA">Massachusetts</option>
									<option value="MI">Michigan</option>
									<option value="MN">Minnesota</option>
									<option value="MS">Mississippi</option>
									<option value="MO">Missouri</option>
									<option value="MT">Montana</option>
									<option value="NE">Nebraska</option>
									<option value="NV">Nevada</option>
									<option value="NH">New Hampshire</option>
									<option value="NJ">New Jersey</option>
									<option value="NM">New Mexico</option>
									<option value="NY">New York</option>
									<option value="NC">North Carolina</option>
									<option value="ND">North Dakota</option>
									<option value="OH">Ohio</option>
									<option value="OK">Oklahoma</option>
									<option value="OR">Oregon</option>
									<option value="PA">Pennsylvania</option>
									<option value="RI">Rhode Island</option>
									<option value="SC">South Carolina</option>
									<option value="SD">South Dakota</option>
									<option value="TN">Tennessee</option>
									<option value="TX">Texas</option>
									<option value="UT">Utah</option>
									<option value="VT">Vermont</option>
									<option value="VA">Virginia</option>
									<option value="WA">Washington</option>
									<option value="WV">West Virginia</option>
									<option value="WI">Wisconsin</option>
									<option value="WY">Wyoming</option>
								</select>					
							</div> 

							<div class="form-group"> <!-- Zip Code-->
								<label for="zip_id" class="control-label">Zip Code</label>
								<input type="text" class="form-control" name="zip" placeholder="#####">
							</div>
							
							<div class="form-group"> <!-- Phone -->
								<label for="phone_id" class="control-label">Phone</label>
								<input type="text" class="form-control" name="phone" placeholder="555-555-5555">
							</div>
							
							<div class="form-group"> <!-- Email -->
								<label for="email_id" class="control-label">Email</label>
								<input type="text" class="form-control" name="email" placeholder="jdoe@example.com">
							</div>
							
							<div class="form-group"> <!-- Recipe Name -->
								<label for="recipe_name_id" class="control-label">Recipe Name</label>
								<input type="text" class="form-control" name="recipeName" placeholder="Traditional Lasagne">
							</div>
							
							<div class="form-group"> <!-- Recipe Origin -->
								<label for="recipe_id" class="control-label">Recipe Origin</label>
								<select class="form-control" name="recipeOrigin">
									<option value=""></option>
									<option value="product_packaging">Product Packaging</option>
									<option value="cento_website">Cento Website</option>
									<option value="cookbook">Cookbook</option>
								</select>					
							</div>
							
							<div class="form-group"> <!-- Comments -->
								<label class="control-label" for="comments">Comments</label>
								<textarea class="form-control" cols="40" name="comments" rows="10"></textarea>
							</div>
							
							<!-- Errors -->
							<div class="form-group">
								<div class="col-md-12">
									<div id="messagesRecipe"></div>
									<br> 
								</div>
							</div>

							<div class="form-group"> <!-- Submit Button --> 
				 				<button type="submit" name="recipeConcern_Submit" value="Submit" class="btn btn-info btn-large">Submit</button>
							</div>     

						</form>	
						 
					</div> 
				</div> 
        	</div>
			<!-- RECIPE FORM End -->

1 个答案:

答案 0 :(得分：2)

$('#recipeForm')引用div父而不是表单，尝试将id属性切换为表单。

相关问题
最新问题