Bootstrap で作成した入力フォームがあります。正しいデータのチェックは JavaScript によって処理され、「リマインド」ボタンをクリックすると、すべてが正しいという通知がポップアップ表示されるように設定されています。ポップアップ通知のこの最後の部分は php POST メソッドによって処理されます。同じポップアップを表示したいのですが、phpの代わりに javascript を使用します。
HTML は次のとおりです。
<form class="form-horizontal" id="registerHere" method='post' action=''>
<fieldset>
<div class="control-group">
<div class="controls">
<input type="text" class="span3" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name" placeholder="First name Last name">
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="text" class="span3" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email" placeholder="me@somewhere.com">
</div>
</div>
<div class="control-group">
<div class="controls controls-row">
<input type="text" class="span1" id="inputPLZ" name="inputPLZ" placeholder="Postal" data-content="Insert your area postal code.">
<input type="text" class="span2" id="inputOrt" name="inputOrt" placeholder="Place" data-content="Where are you from?">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01"></label>
<div class="controls">
<button type="submit" class="btn btn-success" rel="tooltip" title="first tooltip">Remind me</button>
</div>
</div>
</fieldset>
</form>
Javascriptは
<script type="text/javascript">
$(document).ready(function(){
$('#registerHere input').hover(
function(){
$(this).popover('show')
},
function(){
$(this).popover('hide')
}
);
$("#registerHere").validate({
rules:{
user_name:"required",
user_email:{
required:true,
email: true
},
},
messages:{
user_name:"Enter your first and last name",
user_email:{
required:"Enter your email address",
email:"Enter valid email address"
},
},
errorClass: "help-inline",
errorElement: "span",
highlight:function(element, errorClass, validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
}
});
});
</script>
これは、Javascript に置き換えたい PHP の部分です。
<?php if($_POST) { ?>
<div class="alert alert-success">
Thanks, we have your info, and expect our contact really soon!
</div>
<?php } ?>