Question

需要一些帮助...我已经研究了关于权益溢出的解决方案，但是由于某种原因，我的带有验证的HTML表单仍会提交，但不应该提交。

  <form class="submitForm" action="https://www.google.com" method="POST" id="form" target="_blank" onsubmit="return validateForm()">
      <span id="validationMessage" aria-live="polite"></span>
      <input class="nameInput" type="text" name="name" value="" id="name" placeholder="Name">
      <input class="urlInput" type="url" name="url" value="" id="url" placeholder="https://example.com">
      <button type="submit">go!</button>
  </form>

由于我要编写自己的验证，因此故意从输入字段中删除了必需。

但是，基本上，如果 text 输入和 url 输入字段的值为空，则表单不应提交。

但是表格仍在提交！我做错了什么？

这是我的功能，用于检查URL是否有效。或如果其值为空：

  function validateForm(data) {
    console.log('validate form');

    var url = data.url;
    var pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

    if (pattern.test(url)) {
        console.log("Url is valid");
        validationMessage.innerHTML = '';
        return true;
    } else if (url.length === 0 || url === '') {
        console.log("Url is not valid!");
        validationMessage.innerHTML = 'URL format is not correct. Please check your url';
        return false;
    }
  }

这是我的功能，检查文本值字段是否为空：

  function validateName(data) {
    // console.log('validate form');
    console.log('data.name', data.name.length);

    if (data.name.length > 1) {
      // validationMessage.innerHTML = 'Please input a bookmark name';
      console.log('there is a name!');
      return true;
    } else if (data.name === "" || data.name.length === 0) {
      // validationMessage.innerHTML = 'Please input a bookmark name';
      console.log('no name!');
      return false;
    }
  }

他们两个控制台都记录了正确的情况，但是表单仍在提交...

已更新：要回答发布者的问题，请在此处致电 ValidateName（）：

  // ADD A NEW BOOKMARK
  form.addEventListener('submit', function(e){
    e.preventDefault();

    let data = {
      name: nameInput.value,
      url: urlInput.value
    };

    validateName(data);
    // validateForm(data);


    $.ajax({
      url: urlInput.value,
      dataType: 'jsonp',
      statusCode: {
        200: function() {
          console.log( "status code 200 returned" );
          bookMarksArray.push(data);
          console.log("Added bookmark #" + data);
          localStorage.setItem("bookMarksArray", JSON.stringify(bookMarksArray));
          turnLoadingStateOn(bookMarksArray);
        },
        404: function() {
          console.log( "status code 404 returned. cannot add bookmark" );
        }
      }
   });
  });

Answer 1

实际上，如果您不希望提交表单，则需要从提交处理程序返回false。

var namevalid = validateName(data);
!namevalid ? return false : null;

如果在JavaScript中验证失败，如何停止表单提交

1 个答案: