0

我正在尝试使用bootstrapValidator以DD/MM/YYYY格式验证日期，但不知何故它不起作用。试图弄清楚，但不幸的是找不到作为新手的确切原因。

除此之外，以下几点需要更正：

  1. 当您开始输入正确的值时，所有框（边框颜色）都会立即变为绿色。但是一旦其中一个验证失败，它们都会变成红色。我想要的是，如果验证成功，只有相关的输入框应该变为绿色，如果验证失败，则变为红色。

  2. 在验证失败时，在手机号码部分会抛出消息“请输入与模式匹配的值”，这似乎是默认错误消息。有没有办法可以指定自定义错误消息？

Any help would be great !!

注册页面.html

<body>
<div class="form-group">
                    <div class="col-xs-6" id="content"><img src="igxam cover pic6.png" class="img-responsive" alt="igxam logo" width="500" height="300"/></div> 
                    <div class="col-xs-5 panel-body">                       
                        <form id="loginForm" action="" method="post" accept-charset="utf-8">

                        <legend>Sign Up</legend>
                            <h2>It's free and always will be.</h2> <br/>
                                <div class="row">
                                    <div class="col-xs-6 col-md-6">
                                        <input type="text" name="firstname" id="firstname" value="" class="form-control input-medium " placeholder="First Name"  />
                                        <span class="help-block with errors" id="firstNameMessage"></span>
                                    </div>

                                    <div class="col-xs-6 col-md-6">
                                        <input type="text" name="lastname" id="lastname" value="" class="form-control input-medium" placeholder="Last Name"  />
                                        <span class="help-block lastNameMessage"></span>
                                    </div>
                                </div>                      

                            <input type="text" name="emailadd" id="emailadd" value=""  class="form-control input-medium" placeholder="Your Email"  />
                            <span class="help-block" id="emailaddMessage"></span>
                            <input type="text" name="contactno" id="contactno" value="" class="form-control input-medium" 
                              placeholder="Mobile Number" pattern="^([7-9]{1})([0-9]{9})$" title="Please enter a valid mobile no" />
                             <span class="help-block" id="contactnoMessage"></span>                                     


                            <input type="password" name="password" id="password" value="" class="form-control input-medium" placeholder="Password"  />
                            <span class="help-block" id="passwordMessage"></span>                       

                            <br />
                            <label for="birthdate" id="birthdate">Birth Date</label>                        
                            <div class="row">
                              <div class="col-md-3">
                                <select name="dob_day" id="dob_day" class="form-control input-medium required" >
                                            <option value="">Day</option>
                                            <option value="1">1st</option>
                                            <option value="2">2nd</option>
                                            <option value="3">3rd</option>
                                            <option value="4">4th</option>
                                            <option value="5">5th</option>
                                            <option value="6">6th</option>
                                            <option value="7">7th</option>
                                            <option value="8">8th</option>
                                            <option value="9">9th</option>
                                            <option value="10">10th</option>
                                            <option value="11">11th</option>
                                            <option value="12">12th</option>
                                            <option value="13">13th</option>
                                            <option value="14">14th</option>
                                            <option value="15">15th</option>
                                            <option value="16">16th</option>
                                            <option value="17">17th</option>
                                            <option value="18">18th</option>
                                            <option value="19">19th</option>
                                            <option value="20">20th</option>
                                            <option value="21">21st</option>
                                            <option value="22">22nd</option>
                                            <option value="23">23rd</option>
                                            <option value="24">24th</option>
                                            <option value="25">25th</option>
                                            <option value="26">26th</option>
                                            <option value="27">27th</option>
                                            <option value="28">28th</option>
                                            <option value="29">29th</option>
                                            <option value="30">30th</option>
                                            <option value="31">31st</option>                                                                                
                                </select>
                                <span class="help-block" id="dob_dayMessage"></span>                                
                              </div>

                              <div class="col-xs-4">
                                <select name="dob_month" id="dob_month" class="form-control input-medium required" >
                                            <option value="">Month</option>
                                            <option value="1">January</option>
                                            <option value="2">February</option>
                                            <option value="3">March</option>
                                            <option value="4">April</option>
                                            <option value="5">May</option>
                                            <option value="6">June</option>
                                            <option value="7">July</option>
                                            <option value="8">August</option>
                                            <option value="9">September</option>
                                            <option value="10">October</option>
                                            <option value="11">November</option>
                                            <option value="12">December</option>                                                                                                                            
                                </select>
                                <span class="help-block" id="dob_monthMessage"></span>
                              </div>

                              <div class="col-xs-3">
                                <select name="dob_year" id="dob_year" class="form-control input-medium" >
                                    <option value="">Year</option>
                                    <option value="2016">2016</option>
                                    <option value="2015">2015</option>
                                    <option value="2014">2014</option>
                                    <option value="2013">2013</option>
                                    <option value="2012">2012</option>
                                    <option value="2011">2011</option>
                                    <option value="2010">2010</option>
                                    <option value="2009">2009</option>
                                    <option value="2008">2008</option>                                                  
                                    <option value="2007">2007</option>
                                    <option value="2006">2006</option>
                                    <option value="2005">2005</option>
                                    <option value="2004">2004</option>
                                    <option value="2003">2003</option>
                                    <option value="2002">2002</option>
                                    <option value="2001">2001</option>
                                    <option value="2000">2000</option>
                                    <option value="1999">1999</option>
                                    <option value="1998">1998</option>
                                    <option value="1997">1997</option>
                                    <option value="1996">1996</option>
                                    <option value="1995">1995</option>
                                    <option value="1994">1994</option>
                                    <option value="1993">1993</option>
                                    <option value="1992">1992</option>
                                    <option value="1991">1991</option>
                                    <option value="1990">1990</option>
                                    <option value="1989">1989</option>
                                    <option value="1988">1988</option>
                                    <option value="1987">1987</option>
                                    <option value="1986">1986</option>
                                    <option value="1985">1985</option>
                                    <option value="1984">1984</option>
                                    <option value="1983">1983</option>
                                    <option value="1982">1982</option>
                                    <option value="1981">1981</option>
                                    <option value="1980">1980</option>
                                    <option value="1979">1979</option>
                                    <option value="1978">1978</option>
                                    <option value="1977">1977</option>
                                    <option value="1976">1976</option>
                                    <option value="1975">1975</option>
                                    <option value="1974">1974</option>
                                    <option value="1973">1973</option>
                                    <option value="1972">1972</option>
                                    <option value="1971">1971</option>
                                    <option value="1970">1970</option>
                                    <option value="1969">1969</option>
                                    <option value="1968">1968</option>
                                    <option value="1967">1967</option>
                                    <option value="1966">1966</option>
                                    <option value="1965">1965</option>
                                    <option value="1964">1964</option>
                                    <option value="1963">1963</option>
                                    <option value="1962">1962</option>
                                    <option value="1961">1961</option>
                                    <option value="1960">1960</option>
                                    <option value="1959">1959</option>
                                    <option value="1958">1958</option>
                                    <option value="1957">1957</option>
                                    <option value="1956">1956</option>
                                    <option value="1955">1955</option>
                                    <option value="1954">1954</option>
                                    <option value="1953">1953</option>
                                    <option value="1952">1952</option>
                                    <option value="1951">1951</option>
                                    <option value="1950">1950</option>
                                    <option value="1949">1949</option>
                                    <option value="1948">1948</option>
                                    <option value="1947">1947</option>
                                    <option value="1946">1946</option>
                                    <option value="1945">1945</option>
                                    <option value="1944">1944</option>
                                    <option value="1943">1943</option>
                                    <option value="1942">1942</option>
                                    <option value="1941">1941</option>
                                    <option value="1940">1940</option>
                                    <option value="1939">1939</option>
                                    <option value="1938">1938</option>
                                    <option value="1937">1937</option>
                                    <option value="1936">1936</option>
                                    <option value="1935">1935</option>
                                    <option value="1934">1934</option>
                                    <option value="1933">1933</option>
                                    <option value="1932">1932</option>
                                    <option value="1931">1931</option>
                                    <option value="1930">1930</option>
                                    <option value="1929">1929</option>
                                    <option value="1928">1928</option>
                                    <option value="1927">1927</option>
                                    <option value="1926">1926</option>
                                    <option value="1925">1925</option>
                                    <option value="1924">1924</option>
                                    <option value="1923">1923</option>
                                    <option value="1922">1922</option>
                                    <option value="1921">1921</option>
                                    <option value="1920">1920</option>
                                    <option value="1919">1919</option>
                                    <option value="1918">1918</option>
                                    <option value="1917">1917</option>
                                    <option value="1916">1916</option>
                                    <option value="1915">1915</option>
                                    <option value="1914">1914</option>
                                    <option value="1913">1913</option>
                                    <option value="1912">1912</option>
                                    <option value="1911">1911</option>
                                    <option value="1910">1910</option>
                                    <option value="1909">1909</option>
                                    <option value="1908">1908</option>
                                    <option value="1907">1907</option>
                                    <option value="1906">1906</option>
                                    <option value="1905">1905</option>
                                    <option value="1904">1904</option>
                                    <option value="1903">1903</option>
                                    <option value="1902">1902</option>
                                    <option value="1901">1901</option>
                                    <option value="1900">1900</option>                                                                                                                          
                                </select>
                                <span class="help-block" id="dob_yearMessage"></span>
                              </div>
                            </div>                      


                            <label for="gender">Gender</label> 
                            <div class="row" id="gender">
                                    <div class="col-xs-12 selectContainer">
                                        <select name="gender" class="form-control input-medium" >
                                            <option value="">Please select your gender</option>
                                            <option>Male</option>
                                            <option>Female</option>                                         
                                        </select>
                                        <span class="help-block" id="genderMessage"></span>                                     
                                    </div>                                      
                            </div>


                                <br /><br />                                
                                <samp style="font-size:14px">By clicking Create my account, you agree to our <a href="#">Terms</a> and that 
                                            you have read our <a href="#">Data Policy</a>, including our <a href="#">Cookie Use.</a></samp>                                     


                            <br /><br />
                                <button class="btn btn-lg btn-primary btn-block signup-btn" type="submit">Create my account</button>                    

                            </form>                         
                        </div> 
                    </div>              

            <br/><br/><br/>

            <div class="row">
                    <div class="col-xs-6" id="content"></div> 
                    <div class="col-xs-4">
                        <div id="navbar-fixed"></div>
                    </div>
            </div>

        <div class="col-md-5 col-md-offset-6"></div>                    
    </div>    


<script type="text/javascript">
 $(document).ready(function() {

    $('#loginForm').bootstrapValidator({    

        fields: {

            firstname: {                
                trigger: 'blur',            
                container: '#firstNameMessage',         


                validators: {
                    notEmpty: {
                        message: 'You cant leave this empty'                                                
                    },

                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'Firstname can only consist alphabets'
                    },
                    different: {
                        field: 'lastname',
                        message: 'Firstname & lastname can\'t be the same'
                    }
                }
            },

            lastname: {
                trigger: 'blur',
                container: '.lastNameMessage',
                validators: {
                    notEmpty: {
                        message: 'You cant leave this empty'                        
                    },

                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'Lastname can only consist alphabets'
                    },
                    different: {
                        field: 'firstname',
                        message: 'Firstname & Lastname can\'t be the same'
                    }       

                }
            },

            emailadd: {
                 trigger: 'blur',
                 container: '#emailaddMessage',

                validators: {
                    notEmpty: {
                        message: 'Email address is required'
                    },

                    regexp: {                           
                            regexp: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                            message: 'Please enter a valid email address'
                    }           

                }
            },

            contactno:{
                trigger: 'blur',
                container: '#contactnoMessage', 


                 validators: {
                    notEmpty: {
                        message: 'Mobile number is required'                            
                        }                     
                    }, 

                    regexp: {                       
                        regexp: /^([7-9]{1})([0-9]{9})$/, 
                        message: 'Please enter a valid mobile number'
                        }               
                    },

            password: {
                trigger: 'blur',
                container: '#passwordMessage',              

                validators: {
                    notEmpty: {
                        message: 'You cant leave this empty'
                    },

                }
            },


            birthdate: {                
                trigger: 'blur',            
                container: '#dob_dayMessage',   
                container: '#dob_monthMessage', 
                container: '#dob_yearMessage',

                validators: {
                    notEmpty: {
                    message: 'Please select your choice'
                    } 
                }               

            },


            gender: {
            trigger: 'blur',
            container: '#genderMessage',

            validators: {
                notEmpty: {
                    message: 'Please select your choice'
                          } // notEmpty
                        } // validators
            },  // gender



         }
    }); 
});
</script>

<!-- regexp: regexp: /^\s*((31([-/ ])((0?[13578])|(1[02]))\3(\d\d)?\d\d)|((([012]?[1-9])|([123]0))([-/ ])((0?[13-9])|(1[0-2]))\12(\d\d)?\d\d)|(((2[0-8])|(1[0-9])|(0?[1-9]))([-/ ])0?2\22(\d\d)?\d\d)|(29([-/ ])0?2\25(((\d\d)?(([2468][048])|([13579][26])|(0[48])))|((([02468][048])|([13579][26]))00))))\s*$/, --> 

</body>

样式表.css

html, body, div, span,

h1, h2, h3, h4, h5, h6, 

i, center, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;

}

 @media screen and (min-width: 1200px) { 
    body { font-size: 11px; }
    button, input, select, textarea { font-size: 11px; }
}


/* ---- LOGO ---- */
.navbar-header {
    margin-left:0px !important;
    margin-top: 5px;
}

.form-group {
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #D3D8E8));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #D3D8E8 100%);
background-repeat: no-repeat;
background-attachment: fixed;
max-width: 100%;
}


legend{
    color:#141823;
    font-size:25px;
    font-weight:bold;
}

button :hover {
  background-color: #79bc64;
  background-image: -webkit-linear-gradient(top, #79bc64, #5e7056);
  background-image: -moz-linear-gradient(top, #79bc64, #5e7056);
  background-image: -ms-linear-gradient(top, #79bc64, #5e7056);
  background-image: -o-linear-gradient(top, #79bc64, #5e7056);
  background-image: linear-gradient(to bottom, #79bc64, #5e7056);
  text-decoration: none;
}

.form-horizontal .btn .btn-primary{
  background-color: #79bc64;
  background-image: -webkit-linear-gradient(top, #79bc64, #578843);
  background-image: -moz-linear-gradient(top, #79bc64, #578843);
  background-image: -ms-linear-gradient(top, #79bc64, #578843);
  background-image: -o-linear-gradient(top, #79bc64, #578843);
  background-image: linear-gradient(to bottom, #79bc64, #578843);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  text-shadow: 0px 1px 0px #898a88;
  -webkit-box-shadow: 0px 0px 0px #a4e388;
  -moz-box-shadow: 0px 0px 0px #a4e388;
  box-shadow: 0px 0px 0px #a4e388;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #3b6e22  1px;
  text-decoration: none;
}



/* BODY IMAGE CONTROL    */
.img-responsive {
    margin: 0 auto;
    margin-top: 80px;
}   

.form .form-control { margin-bottom: 10px; } */


@media (min-width:768px) {
    #home{
        margin-top:50px;
    }
    #home .slogan{
        color: #0e385f;
        color: #0eee5f
        line-height: 0px;
        font-weight:bold;
    }   
}


 .form-horizontal  {
    float:right;
    padding-top: 10px;
    padding-bottom: 2px;
}

.control-label {
    text-align:left !important;
}


.panel-body {
    float:justify;
}

.form-control:focus {
  border-color: green;
  box-shadow: inset 0 1px 1px rgba(0, 255, 0, 0.075), 0 0 8px rgba(0, 255, 0, 0.3); 
}

/* error-message font-size */
.help-block{    
 font-size:14px;
}
4

2 回答 2

1

你想要的，可以通过使用 Angularjs 和 Bootstrap 来完成，这里有一个演示：

<!DOCTYPE html>
<html>
<head>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Form </title>
  <style>
  /* Styles go here */
body {
  padding: 10px;
}

.form-group .help-block {
  display: none;
}
 
.form-group.has-error .help-block {
  display: block;
}
  </style>
</head>
<body ng-app="app" ng-controller="NewUserController">
<form name="userForm" novalidate>
  
  <div class="form-group" show-errors='{showSuccess: true}'>
    <label class="control-label">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" name="name" ng-model="user.name" required>
    <p class="help-block" ng-if="userForm.name.$error.required">The user's name is required</p>
  </div>
  
  <div class="form-group" show-errors='{showSuccess: true}'>
    <label class="control-label">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email" ng-model="user.email" required>
   <p class="help-block" ng-if="userForm.email.$error.required">The user's email is required</p>
        <p class="help-block" ng-if="userForm.email.$error.email">The email address is invalid</p>
  </div>
  
  <button type="submit" class="btn btn-info" ng-click="save()">Submit</button>
  <button class="btn btn-link" ng-click="reset()">Reset</button>
</form>
  
  <script>
 module = angular.module('app', []);

 module.directive('showErrors', function ($timeout, showErrorsConfig) {
      var getShowSuccess, linkFn;
      getShowSuccess = function (options) {
        var showSuccess;
        showSuccess = showErrorsConfig.showSuccess;
        if (options && options.showSuccess != null) {
          showSuccess = options.showSuccess;
        }
        return showSuccess;
      };
      linkFn = function (scope, el, attrs, formCtrl) {
        var blurred, inputEl, inputName, inputNgEl, options, showSuccess, toggleClasses;
        blurred = false;
        options = scope.$eval(attrs.showErrors);
        showSuccess = getShowSuccess(options);
        inputEl = el[0].querySelector('[name]');
        inputNgEl = angular.element(inputEl);
        inputName = inputNgEl.attr('name');
        if (!inputName) {
          throw 'show-errors element has no child input elements with a \'name\' attribute';
        }
        inputNgEl.bind('blur', function () {
          blurred = true;
          return toggleClasses(formCtrl[inputName].$invalid);
        });
        scope.$watch(function () {
          return formCtrl[inputName] && formCtrl[inputName].$invalid;
        }, function (invalid) {
          if (!blurred) {
            return;
          }
          return toggleClasses(invalid);
        });
        scope.$on('show-errors-check-validity', function () {
          return toggleClasses(formCtrl[inputName].$invalid);
        });
        scope.$on('show-errors-reset', function () {
          return $timeout(function () {
            el.removeClass('has-error');
            el.removeClass('has-success');
            return blurred = false;
          }, 0, false);
        });
        return toggleClasses = function (invalid) {
          el.toggleClass('has-error', invalid);
          if (showSuccess) {
            return el.toggleClass('has-success', !invalid);
          }
        };
      };
      return {
        restrict: 'A',
        require: '^form',
        compile: function (elem, attrs) {
          if (!elem.hasClass('form-group')) {
            throw 'show-errors element does not have the \'form-group\' class';
          }
          return linkFn;
        }
      };
    }
  );
  
  module.provider('showErrorsConfig', function () {
    var _showSuccess;
    _showSuccess = false;
    this.showSuccess = function (showSuccess) {
      return _showSuccess = showSuccess;
    };
    this.$get = function () {
      return { showSuccess: _showSuccess };
    };
  });

module.controller('NewUserController', function($scope) {
  $scope.save = function() {
    $scope.$broadcast('show-errors-check-validity');
    
    if ($scope.userForm.$valid) {
      alert('User saved');
      $scope.reset();
    }
  };
  
  $scope.reset = function() {
    $scope.$broadcast('show-errors-reset');
    $scope.user = { name: '', email: '' };
  }
});

  </script>
</body>
</html>

于 2016-04-02T10:22:17.383 回答
1

问题是<div class="form-group"></div>你放在开头

写作形式

由于 BootstrapValidator 旨在与 Bootstrap 一起使用，因此您的表单必须使用 Bootstrap 类进行结构化。

如果您的表单不是由 Bootstrap 类构成的（包含字段和关联标签的元素没有表单组类），您将在控制台中看到以下错误：Uncaught RangeError: Maximum call stack size exceeded

以及您面临的奇怪的验证行为。

最小的例子是每个输入都有自己的form-group类，您不能将所有输入字段放在一个form-group类中。

<form>
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
    </div>
    <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
    </div>
</form>

这是您的代码的工作小提琴示例，其中前两个输入有自己的form-group类，表单的其余部分有公共form-group类，看看区别

到目前为止，我正在尝试使用 bootstrapValidator 以 DD/MM/YYYY 格式验证日期

我建议使用引导日历插件，这是一个验证示例date，让用户生活更轻松，而不是创建 3 个下拉列表并要求用户选择每个下拉列表值然后验证它。

于 2016-04-02T11:47:59.550 回答