douyan6548 2017-07-09 08:55
浏览 57
已采纳

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

I want to display error when the user doesn't enter in the input field after he clicks on the submit button. This display should be displayed at right of the input field. But i can't seem to figure out how is that possible using php and javascript. Here is my code:

<?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";?>
  • 写回答

1条回答 默认 最新

  • doujiene2845 2017-07-09 09:00
    关注

    https://www.w3schools.com/js/js_validation.asp Check this. Alternatively you could work with php only and show the message after the form has been submitted (in form handler).

    Here you have some more examples using 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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择
  • ¥15 这款软件是什么?需要能满足我的需求
  • ¥15 SpringSecurityOauth2登陆前后request不一致