使用javascript单击提交后弹出空输入

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并在提交表单后显示消息（在表单处理程序中）。

这里有一些使用bootstrap的例子： 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