选中确认复选框后提交HTML表单

时间：2018-08-17 09:12:40

标签： javascript jquery html css

我已经创建了带有验证的HTML表单，当我直接单击注册按钮时，无需输入任何数据，它会提醒用户接受隐私策略并显示验证消息。现在，当我填写表单并单击复选框，然后单击注册按钮时，它仍然会提醒我接受隐私策略。这是我的代码

$(function() {
  $('#first-name-warning-message').hide();
  $('#last-name-warning-message').hide();

  var first_name_error = false;
  var last_name_error = false;

  $('#first-name').focusout(function() {
    validate_first_name();
  });

  $('#last-name').focusout(function() {
    validate_last_name();
  });

  function validate_first_name() {
    var first_name = $('#first-name').val();
    var first_name_regex = /^[a-zA-Z ]{3,15}$/;

    if (first_name.length == '') {
      $('#first-name-warning-message').html("Please Enter Your First Name !");
      $('#first-name-warning-message').show();
      first_name_error = true;
    } else if (first_name.length < 3) {
      $('#first-name-warning-message').html("First Name Not Valid !");
      $('#first-name-warning-message').show();
      first_name_error = true;
    } else if (!first_name_regex.test(first_name)) {
      $('#first-name-warning-message').html("First Name Must Not Contain Any Digits Or Symbols !");
      $('#first-name-warning-message').show();
      first_name_error = true;
    } else {
      $('#first-name-warning-message').hide();
    }
  }

  function validate_last_name() {
    var last_name = $('#last-name').val();
    var last_name_regex = /^[a-zA-Z ]{3,15}$/;

    if (last_name.length == '') {
      $('#last-name-warning-message').html("Please Enter Your Last Name !");
      $('#last-name-warning-message').show();
      last_name_error = true;
    } else if (last_name.length < 3) {
      $('#last-name-warning-message').html("Last Name Not Valid !");
      $('#last-name-warning-message').show();
      last_name_error = true;
    } else if (!last_name_regex.test(last_name)) {
      $('#last-name-warning-message').html("Last Name Must Not Contain Any Digits Or Symbols !");
      $('#last-name-warning-message').show();
      last_name_error = true;
    } else {
      $('#last-name-warning-message').hide();
    }
  }

  $('#sign-up-form').submit(function(e) {
    first_name_error = false;
    last_name_error = false;
    age_error = false;

    validate_first_name();
    validate_last_name();
    check_confirmation();

    function check_confirmation() {
      if (!$('privacy-policy').is(":checked")) {
        window.alert("Please Accept Our Privacy Policy !");
        e.preventDefault();
      } else {
        window.alert("Thank You For Accepting Our Privacy Policy !");
      }
    }

    if ((first_name_error == false) && (last_name_error == false)) {
      return true;
    } else {
      return false;
    }
  });
});
#first-name {
  width: 300px;
  margin-top: 10px;
  margin-left: 200px;
  padding-left: 10px;
  border: 1px solid grey;
  border-radius: 5px;
}

#last-name {
  width: 300px;
  margin-top: 5px;
  margin-left: 200px;
  padding-left: 10px;
  border: 1px solid grey;
  border-radius: 5px;
}

#first-name-warning-message {
  padding-left: 350px;
  font-size: 18px;
  font-weight: bold;
}

#last-name-warning-message {
  padding-left: 350px;
  font-size: 18px;
  font-weight: bold;
}

#privacy-policy {
  margin-left: 10px;
}

#sign-up-button {
  width: 200px;
  margin-top: 10px;
  margin-left: 240px;
  font-size: 18px;
  border-radius: 50px;
}
<!DOCTYPE html>
<html id="html">

<head id="html">
  <title> E-Chatz_Online.com - Sign Up </title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body id="body">
  <form id="sign-up-form" method="post">
    <div id="row-one">
      <input type="text" id="first-name" name="first_name" placeholder="First Name" maxlength="15" autocomplete="off">
    </div>
    <div id="span-container">
      <span id="first-name-warning-message" class="text-danger"> </span>
    </div>
    <div id="row-two">
      <input type="text" id="last-name" name="last_name" placeholder="Last Name" maxlength="15" autocomplete="off">
    </div>
    <div id="span-container">
      <span id="last-name-warning-message" class="text-danger"> </span>
    </div>
    <div id="row-three">
      <input type="checkbox" id="privacy-policy"> By clicking the <b> Sign Up </b> button, you acknowledge that you have read and agree our <a href="#"> Privacy Policy </a> . </input>
    </div>
    <div id="row-four">
      <button id="sign-up-button" name="sign_up_button" class="btn btn-primary" type="submit"> Sign Up </button>
    </div>
  </form>
</body>

</html>

如何解决这个问题。

2 个答案:

答案 0 :(得分：1)

这是一个简单的错误。您的选择器不正确。您需要更改

$('privacy-policy').is(":checked")

到

$('#privacy-policy').is(":checked")

as privacy-policy是您要引用的ID。

<!DOCTYPE html>
<html id="html">

<head id="html">
  <title> E-Chatz_Online.com - Sign Up </title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <style>
    #first-name {
      width: 300px;
      margin-top: 10px;
      margin-left: 200px;
      padding-left: 10px;
      border: 1px solid grey;
      border-radius: 5px;
    }
    
    #last-name {
      width: 300px;
      margin-top: 5px;
      margin-left: 200px;
      padding-left: 10px;
      border: 1px solid grey;
      border-radius: 5px;
    }
    
    #first-name-warning-message {
      padding-left: 350px;
      font-size: 18px;
      font-weight: bold;
    }
    
    #last-name-warning-message {
      padding-left: 350px;
      font-size: 18px;
      font-weight: bold;
    }
    
    #privacy-policy {
      margin-left: 10px;
    }
    
    #sign-up-button {
      width: 200px;
      margin-top: 10px;
      margin-left: 240px;
      font-size: 18px;
      border-radius: 50px;
    }
  </style>
</head>

<body id="body">
  <form id="sign-up-form" method="post">
    <div id="row-one">
      <input type="text" id="first-name" name="first_name" placeholder="First Name" maxlength="15" autocomplete="off">
    </div>
    <div id="span-container">
      <span id="first-name-warning-message" class="text-danger"> </span>
    </div>
    <div id="row-two">
      <input type="text" id="last-name" name="last_name" placeholder="Last Name" maxlength="15" autocomplete="off">
    </div>
    <div id="span-container">
      <span id="last-name-warning-message" class="text-danger"> </span>
    </div>
    <div id="row-three">
      <input type="checkbox" id="privacy-policy"> By clicking the <b> Sign Up </b> button, you acknowledge that you have read and agree our <a href="#"> Privacy Policy </a> . </input>
    </div>
    <div id="row-four">
      <button id="sign-up-button" name="sign_up_button" class="btn btn-primary" type="submit"> Sign Up </button>
    </div>
  </form>
  <script>
    $(function() {
      $('#first-name-warning-message').hide();
      $('#last-name-warning-message').hide();

      var first_name_error = false;
      var last_name_error = false;

      $('#first-name').focusout(function() {
        validate_first_name();
      });

      $('#last-name').focusout(function() {
        validate_last_name();
      });

      function validate_first_name() {
        var first_name = $('#first-name').val();
        var first_name_regex = /^[a-zA-Z ]{3,15}$/;

        if (first_name.length == '') {
          $('#first-name-warning-message').html("Please Enter Your First Name !");
          $('#first-name-warning-message').show();
          first_name_error = true;
        } else if (first_name.length < 3) {
          $('#first-name-warning-message').html("First Name Not Valid !");
          $('#first-name-warning-message').show();
          first_name_error = true;
        } else if (!first_name_regex.test(first_name)) {
          $('#first-name-warning-message').html("First Name Must Not Contain Any Digits Or Symbols !");
          $('#first-name-warning-message').show();
          first_name_error = true;
        } else {
          $('#first-name-warning-message').hide();
        }
      }

      function validate_last_name() {
        var last_name = $('#last-name').val();
        var last_name_regex = /^[a-zA-Z ]{3,15}$/;

        if (last_name.length == '') {
          $('#last-name-warning-message').html("Please Enter Your Last Name !");
          $('#last-name-warning-message').show();
          last_name_error = true;
        } else if (last_name.length < 3) {
          $('#last-name-warning-message').html("Last Name Not Valid !");
          $('#last-name-warning-message').show();
          last_name_error = true;
        } else if (!last_name_regex.test(last_name)) {
          $('#last-name-warning-message').html("Last Name Must Not Contain Any Digits Or Symbols !");
          $('#last-name-warning-message').show();
          last_name_error = true;
        } else {
          $('#last-name-warning-message').hide();
        }
      }

      $('#sign-up-form').submit(function(e) {
        first_name_error = false;
        last_name_error = false;
        age_error = false;

        validate_first_name();
        validate_last_name();
        check_confirmation();

        function check_confirmation() {
          if (!$('#privacy-policy').is(":checked")) {
            window.alert("Please Accept Our Privacy Policy !");
            e.preventDefault();
          } else {
            window.alert("Thank You For Accepting Our Privacy Policy !");
          }
        }

        if ((first_name_error == false) && (last_name_error == false)) {
          return true;
        } else {
          return false;
        }
      });
    });
  </script>
</body>

</html>

答案 1 :(得分：1)

在变量前使用<div @click="assignData('test', 'new value for test)"> 。 在功能 assignData(prop,val) { this[prop] = val; console.log(this.test); }

中使用#
相关问题
最新问题