个人中心
gpt4 book ai didi

javascript - 使用本地存储数据生成字段时如何消除表单验证错误

转载 作者：行者123 更新时间：2023-11-27 23:43:59 24 4
gpt4 key购买 nike

我有这个表格，我正在尝试验证它。当没有输入时，它应该抛出消息“这是必需的”并禁用提交按钮。它工作正常，如果输入字段为空，它会抛出错误消息。现在我正在做的是将这些表单字段数据保存到浏览器本地存储中，并且当用户尝试再次填写表单时从本地存储生成这些字段。但即使在字段中预先填充了 cookie，“这是必需的”消息仍然显示，并且按钮被禁用。我怎样才能解决这个问题？ 

</script>
      <script src="angular.js"></script>
      <script type="text/javascript">
      function cookies(){

    var fieldvalue = document.getElementById('rentname').value;
    var fieldvalue1 = document.getElementById('rentphone').value;
    var fieldvalue2 = document.getElementById('rentaddress').value;

    localStorage.setItem('text',fieldvalue);
    localStorage.setItem('text1',fieldvalue1);
    localStorage.setItem('text2',fieldvalue2);
  }

  function load(){
    var storedValue = localStorage.getItem('text');
    var storedValue1 = localStorage.getItem('text1');
    var storedValue2 = localStorage.getItem('text2');

    if(storedValue){
      document.getElementById('rentname').value = storedValue;
    }

    if(storedValue1){
      document.getElementById('rentphone').value = storedValue1;
    }

    if(storedValue2){
      document.getElementById('rentaddress').value = storedValue2;
    }
  }
</script>


</head>
   <body onload="load()">
      <div class="container">
         <div class="row" style="padding-top:2rem;">
            <div class="col-md-4">
               <h2>Reserve Your Seat</h2>
            </div>
         </div>
         <hr>
         <form ng-app="rentalform" ng-controller="validateCtrl" method="post" id="rentalform" name="rentalform"     action="rentinsertdb.php" novalidate>
           <div class="form-group space" >
              <label for="focusedinput" class="col-sm-2 control-label">Full Name</label>
              <div class="col-sm-8 tabular-border">
                 <input type="text" class="form-control" placeholder="Enter full name" name="rentname" id="rentname" ng-model="rentname" required>
                 <span style="color:red">
                  <span ng-show="!rentname.length">Name is required.</span>
                </span>
              </div>
           </div>
           <div class="form-group space" >
              <label for="focusedinput" class="col-sm-2 control-label">Choose your ride</label>
              <div class="col-sm-8 tabular-border">
                 <div class="dropdown">
                  <select class="btn btn-default dropdown-toggle" name="rentcar" ng-model="rentcar" required>
                    <option value="" disabled selected>Choose your ride</option>
                    <option value="Toyota Alion 2008">Toyota Alion 2008</option>
                    <option value="Toyota Premio 2008">Toyota Premio 2008</option>
                    <option value="Toyota Corolla 2006">Toyota Corolla 2006</option>
                    <option value="Toyota Noah 2010">Toyota Noah 2010</option>
                    <span style="color:red" ng-show="rentalform.rentcar.$dirty && rentalform.rentcar.$invalid">
                 </select>
                 <span style="color:red">
                  <span ng-show="!rentcar.length">Please Select Your Car.</span>
                 </div>
              </div>
           </div>
           <!-- <div class="form-group space" >
              <label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
              <div class="col-sm-8 tabular-border">
                 <input type="text" class="form-control" id="focusedinput" placeholder="Enter phone number">
              </div>
              <div class="col-sm-2">
                 <p class="help-block"></p>
              </div>
           </div> -->
           <div class="form-group space" >
              <label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
              <div class="col-sm-8 tabular-border">
                 <input type="text" minlength="11" class="form-control" name="rentphone" placeholder="Enter phone number" ng-model="rentphone" id="rentphone" required>
                 <span style="color:red">
                  <span ng-show="!rentphone.length">Phone Number is Required.</span>
              </div>
              <div class="col-sm-2">
                 <p class="help-block"></p>
              </div>
           </div>
           <div class="form-group space" >
            <label for="focusedinput" class="col-sm-2 control-label">Date</label>
            <div class="col-sm-8 tabular-border">
               <input type="date" class="form-control" id="focusedinput" placeholder="On Which date you would like to rent your ride?" name="rentdate" ng-model="rentdate" required>
               <span style="color:red">
                  <span ng-show="!rentdate.length">Date is Required.</span>
            </div>
            <div class="col-sm-2">
               <p class="help-block"></p>
            </div>
         </div>
           <div class="form-group space" >
            <label for="focusedinput" class="col-sm-2 control-label">Profession</label>
            <div class="col-sm-8 tabular-border">
               <input type="text" class="form-control" id="focusedinput" placeholder="Enter Institution/Profession" name="rentprof">
            </div>
            <div class="col-sm-2">
               <p class="help-block"></p>
            </div>
         </div>
           <div class="form-group space">
              <label for="txtarea1" class="col-sm-2 control-label">Pick up address</label>
              <div class="col-sm-8 tabular-border"><textarea  name="rentaddress" cols="50" rows="4" class="form-control" ng-model="rentaddress" placeholder="Enter Full Address; For example: House#38, Road 7/a, Dhanmondi, Dhaka-1205, Bangladesh" id="rentaddress" required></textarea>

          </div>
          <span style="color:red">
              <span ng-show="!rentaddress.length">Address is Required.</span>
       </div>

       <div class="col-sm-8 col-sm-offset-2 space">
          <button class="btn-primary btn" style="background-color:#03a9f4; border-color:#03a9f4;" id="submitrent" data-toggle="modal" data-target="#myModal" ng-disabled="rentalform.$invalid" onClick="cookies()"> Confirm </button>
       </div>
     </form>
     <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Order Placed!</h4>
    </div>
    <div class="modal-body">
      <p>Your Order Has Been Placed! We will call you shortly!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

    </div>
  </div>

</div>


</div>


 </div>
  <script type="text/javascript">


$("#submitrent").click( function() {
     $.post( $("#rentalform").attr("action"),
     $("#rentalform :input").serializeArray(),
     function(info){ $("#result").html(info);
     });
     clearInput();
     });
     $("#rentalform").submit(function() {
        return false;
     });
     function clearInput() {
         $("#rentalform :input").each( function() {
            $(this).val('');
             });
         }
  </script>

  <script>
    var app = angular.module('rentalform', []);
    app.controller('validateCtrl', function($scope) {

    });

最佳答案

为什么不利用 Angular 能力来处理表单。你可以试试这个。

骗子:http://plnkr.co/edit/sQWL0QPFNNsmVh4bXMUH?p=preview

HTML

 <body ng-controller="MainCtrl">
  <form name="myForm" novalidate>
    <label>* First Name</label>
    <input name="firstName" class="input-text" type="text" data-ng-model="user.firstName" required data-ng-class="{'required-error':nameError}">
    <div data-ng-if="nameError" class="error-msg">First Name is Required</div>
    <br/>

    <input data-ng-click="submit()" type="submit" value="Submit">
    <button data-ng-click="loadLocalData()">Load Local Data</button>
  </form>
</body>

JS

app.controller('MainCtrl', function($scope) {
  $scope.user = {
    firstName: '',
    lastName: ''
  };
  $scope.nameError = false;

  localStorage.setItem('firstName', 'Harsh');

  $scope.submit = function() {
    if ($scope.myForm.firstName.$valid) {
      $scope.nameError = false;
      // make request here
    } else {
      $scope.nameError = true;
    }
  };

  $scope.loadLocalData = function() {
    $scope.user.firstName = localStorage.getItem('firstName');
    $scope.nameError = false;
    $scope.myForm.$setPristine();
  };
});

说明

  1. 将 name 属性添加到您的表单并添加 novalidate(将阻止默认验证)
  2. AngularJS 将在范围内创建一个具有表单名称的对象(此处为 $scope.myForm)
  3. 为输入添加名称属性(将创建名称类似于 $scope.myForm.firstName 的对象)
  4. 提交时进行验证并检查必填字段
  5. 在重置或加载本地数据(如果需要)时重置错误变量并将表单设置为原始状态
  6. 阅读 angularjs 文档了解更多信息 https://docs.angularjs.org/guide/forms

关于javascript - 使用本地存储数据生成字段时如何消除表单验证错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33407950/

24 4 0
文章推荐： html - 将文本 float 到左侧的第二个图像上
文章推荐： c++ - 如何在 C++ 预处理器指令中使用 "#"作为字符
文章推荐： javascript - XMLHttp请求 : running more than one
文章推荐： html - 面板标题中的 bootstrap 3 输入组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com