javascriptを使用してサブミットをクリックした後の空の入力にpopover

Question

送信ボタンをクリックした後にユーザーが入力フィールドに入力しないと、エラーを表示します。この表示は、入力フィールドの右側に表示されます。しかし、私はどのようにPHPとJavaScriptを使用して可能であるかを把握していないようです。ここに私のコードは次のとおりです。

<?php include "head.php";?> 
<div class="container"> 
<?php 

    if(isset($_SESSION["error"]) && $_SESSION["error"] != ""){ 
      echo $_SESSION["error"];   
     }unset($_SESSION["error"]); 
    if(isset($_SESSION["error1"]) && $_SESSION["error1"] != ""){ 
      echo $_SESSION["error1"];  
     }unset($_SESSION["error1"]); 

    if(isset($_SESSION["warning"]) && $_SESSION["warning"] != ""){ 
      echo $_SESSION["warning"];  
     }unset($_SESSION["warning"]); 
    if(isset($_SESSION["warning1"]) && $_SESSION["warning1"] != ""){ 
      echo $_SESSION["warning1"];  
     }unset($_SESSION["warning1"]); 
    if(isset($_SESSION["success"]) && $_SESSION["success"] != ""){ 
      echo $_SESSION["success"];  
     }unset($_SESSION["success"]); 
?> 
<form class="form-horizontal" action="loginprocess.php" method="post"> 

<!--username input---> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-3 control-label">username</label> 
    <div class="col-sm-6"> 
     <input type="text" class="form-control" id="inputEmail3" placeholder="Email" name="username"> 
    </div> 
    </div> 
<!--password input ---> 
    <div class="form-group"> 
    <label for="inputPassword3" class="col-sm-3 control- 
     label">Password</label> 
    <div class="col-sm-6"> 
     <input type="password" class="form-control" id="inputPassword3" 
       placeholder="Password" name="password"> 
    </div> 
    </div> 
<!-- input file ---> 
<div class="form-group"> 
    <label for="exampleInputFile" class="col-sm-3 control-label">File 
      input</label> 
    <div class="col-sm-6">  
    <input type="file" id="exampleInputFile" name="file"> 
    <!--<p class="help-block">Example block-level help text here.</p>--> 
    </div> 
    </div> 

<!-- selecting country ---> 
<div class="form-group"> 
<label for="country" class="col-sm-3 control-label">Select Country</label> 
<div class="col-sm-6"> 
    <select class="form-control" id="country" name="country[]"> 
    Nepal 
    <span class="caret"></span> 
     <option><a href="#">Nepal</a></option> 
     <option><a href="#">USA</a></option> 
     <option><a href="#">Dubai</a></option> 
    <option><a href="#">Nepal</a></option> 
    <option><a href="#">USA</a></option> 
     <option><a href="#">Dubai</a></option> 
    <option><a href="#">Nepal</a></option> 
     <option><a href="#">USA</a></option> 
     <option><a href="#">Dubai</a></option> 
</select> 
</div> 
</div> 
<!-- checkbox---> 
    <div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-6"> 
     <div class="checkbox"> 
     <label> 
      <input type="checkbox" name="remember me"> Remember me 
     </label> 
     </div> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-9"> 
     <button type="submit" class="btn btn-default">Sign in</button> 
    </div> 
    </div> 
</form> 
</div> 
<script> 
$(function() { 
    $("[data-toggle="tooltip"]").tooltip() 
}) 
</script> 
<?php 
print_r ($_POST); 
?> 
<?php include "foot.php";?> 

Answer 1

https://www.w3schools.com/js/js_validation.asp はこれを確認してください。代わりに、フォームハンドラでフォームがサブミットされた後にPHPのみで作業し、メッセージを表示することもできます。 http://1000hz.github.io/bootstrap-validator/

$(document).ready(function() { 
 
    $('#contact_form').bootstrapValidator({ 
 
     // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later 
 
     feedbackIcons: { 
 
     valid: 'glyphicon glyphicon-ok', 
 
     invalid: 'glyphicon glyphicon-remove', 
 
     validating: 'glyphicon glyphicon-refresh' 
 
     }, 
 
     fields: { 
 
     first_name: { 
 
      validators: { 
 
      stringLength: { 
 
       min: 2, 
 
      }, 
 
      notEmpty: { 
 
       message: 'Please supply your first name' 
 
      } 
 
      } 
 
     }, 
 
     last_name: { 
 
      validators: { 
 
      stringLength: { 
 
       min: 2, 
 
      }, 
 
      notEmpty: { 
 
       message: 'Please supply your last name' 
 
      } 
 
      } 
 
     }, 
 
     email: { 
 
      validators: { 
 
      notEmpty: { 
 
       message: 'Please supply your email address' 
 
      }, 
 
      emailAddress: { 
 
       message: 'Please supply a valid email address' 
 
      } 
 
      } 
 
     }, 
 
     phone: { 
 
      validators: { 
 
      notEmpty: { 
 
       message: 'Please supply your phone number' 
 
      }, 
 
      phone: { 
 
       country: 'US', 
 
       message: 'Please supply a vaild phone number with area code' 
 
      } 
 
      } 
 
     }, 
 
     address: { 
 
      validators: { 
 
      stringLength: { 
 
       min: 8, 
 
      }, 
 
      notEmpty: { 
 
       message: 'Please supply your street address' 
 
      } 
 
      } 
 
     }, 
 
     city: { 
 
      validators: { 
 
      stringLength: { 
 
       min: 4, 
 
      }, 
 
      notEmpty: { 
 
       message: 'Please supply your city' 
 
      } 
 
      } 
 
     }, 
 
     state: { 
 
      validators: { 
 
      notEmpty: { 
 
       message: 'Please select your state' 
 
      } 
 
      } 
 
     }, 
 
     zip: { 
 
      validators: { 
 
      notEmpty: { 
 
       message: 'Please supply your zip code' 
 
      }, 
 
      zipCode: { 
 
       country: 'US', 
 
       message: 'Please supply a vaild zip code' 
 
      } 
 
      } 
 
     }, 
 
     comment: { 
 
      validators: { 
 
      stringLength: { 
 
       min: 10, 
 
       max: 200, 
 
       message: 'Please enter at least 10 characters and no more than 200' 
 
      }, 
 
      notEmpty: { 
 
       message: 'Please supply a description of your project' 
 
      } 
 
      } 
 
     } 
 
     } 
 
    }) 
 
    .on('success.form.bv', function(e) { 
 
     $('#success_message').slideDown({ 
 
     opacity: "show" 
 
     }, "slow") // Do something ... 
 
     $('#contact_form').data('bootstrapValidator').resetForm(); 
 

 
     // Prevent form submission 
 
     e.preventDefault(); 
 

 
     // Get the form instance 
 
     var $form = $(e.target); 
 

 
     // Get the BootstrapValidator instance 
 
     var bv = $form.data('bootstrapValidator'); 
 

 
     // Use Ajax to submit form data 
 
     $.post($form.attr('action'), $form.serialize(), function(result) { 
 
     console.log(result); 
 
     }, 'json'); 
 
    }); 
 
});

#success_message { 
 
    display: none; 
 
}

<head> 
 
    <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> 
 
</head> 
 

 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet" /> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
    <form class="well form-horizontal" action=" " method="post" id="contact_form"> 
 
    <fieldset> 
 

 
     <!-- Form Name --> 
 
     <legend>Contact Us Today!</legend> 
 

 
     <!-- Text input--> 
 

 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">First Name</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
      <input name="first_name" placeholder="First Name" class="form-control" type="text"> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Text input--> 
 

 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">Last Name</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
      <input name="last_name" placeholder="Last Name" class="form-control" type="text"> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Text input--> 
 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">E-Mail</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> 
 
      <input name="email" placeholder="E-Mail Address" class="form-control" type="text"> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 

 
     <!-- Text input--> 
 

 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">Phone #</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> 
 
      <input name="phone" placeholder="(845)555-1212" class="form-control" type="text"> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Text input--> 
 

 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">Address</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
 
      <input name="address" placeholder="Address" class="form-control" type="text"> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Text input--> 
 

 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">City</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
 
      <input name="city" placeholder="city" class="form-control" type="text"> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Select Basic --> 
 

 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">State</label> 
 
     <div class="col-md-4 selectContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span> 
 
      <select name="state" class="form-control selectpicker"> 
 
     <option value=" " >Please select your state</option> 
 
     <option>Alabama</option> 
 
     <option>Alaska</option> 
 
     <option >Arizona</option> 
 
     <option >Arkansas</option> 
 
     <option >California</option> 
 
     <option >Colorado</option> 
 
     <option >Connecticut</option> 
 
     <option >Delaware</option> 
 
     <option >District of Columbia</option> 
 
     <option> Florida</option> 
 
     <option >Georgia</option> 
 
     <option >Hawaii</option> 
 
     <option >daho</option> 
 
     <option >Illinois</option> 
 
     <option >Indiana</option> 
 
     <option >Iowa</option> 
 
     <option> Kansas</option> 
 
     <option >Kentucky</option> 
 
     <option >Louisiana</option> 
 
     <option>Maine</option> 
 
     <option >Maryland</option> 
 
     <option> Mass</option> 
 
     <option >Michigan</option> 
 
     <option >Minnesota</option> 
 
     <option>Mississippi</option> 
 
     <option>Missouri</option> 
 
     <option>Montana</option> 
 
     <option>Nebraska</option> 
 
     <option>Nevada</option> 
 
     <option>New Hampshire</option> 
 
     <option>New Jersey</option> 
 
     <option>New Mexico</option> 
 
     <option>New York</option> 
 
     <option>North Carolina</option> 
 
     <option>North Dakota</option> 
 
     <option>Ohio</option> 
 
     <option>Oklahoma</option> 
 
     <option>Oregon</option> 
 
     <option>Pennsylvania</option> 
 
     <option>Rhode Island</option> 
 
     <option>South Carolina</option> 
 
     <option>South Dakota</option> 
 
     <option>Tennessee</option> 
 
     <option>Texas</option> 
 
     <option> Uttah</option> 
 
     <option>Vermont</option> 
 
     <option>Virginia</option> 
 
     <option >Washington</option> 
 
     <option >West Virginia</option> 
 
     <option>Wisconsin</option> 
 
     <option >Wyoming</option> 
 
    </select> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Text input--> 
 

 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">Zip Code</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> 
 
      <input name="zip" placeholder="Zip Code" class="form-control" type="text"> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Text input--> 
 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">Website or domain name</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span> 
 
      <input name="website" placeholder="Website or domain name" class="form-control" type="text"> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- radio checks --> 
 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">Do you have hosting?</label> 
 
     <div class="col-md-4"> 
 
      <div class="radio"> 
 
      <label> 
 
            <input type="radio" name="hosting" value="yes" /> Yes 
 
           </label> 
 
      </div> 
 
      <div class="radio"> 
 
      <label> 
 
            <input type="radio" name="hosting" value="no" /> No 
 
           </label> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Text area --> 
 

 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label">Project Description</label> 
 
     <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span> 
 
      <textarea class="form-control" name="comment" placeholder="Project Description"></textarea> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Success message --> 
 
     <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div> 
 

 
     <!-- Button --> 
 
     <div class="form-group"> 
 
     <label class="col-md-4 control-label"></label> 
 
     <div class="col-md-4"> 
 
      <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button> 
 
     </div> 
 
     </div> 
 

 
    </fieldset> 
 
    </form> 
 
</div> 
 
</div> 
 
<!-- /.container -->

https://codepen.io/jaycbrf/pen/iBszr

：ここ

あなたは、ブートストラップを使用して、いくつかのより多くの例を持っています