按钮未禁用,当 error=true 时也是如此。

huangapple go评论76阅读模式
英文:

button not disabling , when error=true then also

问题

我已经添加了 JavaScript 代码,应该在出现错误时禁用按钮以防止表单提交,我可以看到错误,但按钮没有禁用,而且它仍然提交了表单。

在 console.log 中,我也可以看到 true。

$(function() {
  $('#homePage').parsley();
  $('#image').on('change', function() {
    validateImage(this);
  });
});

function validateImage(input) {
  var file = input.files[0];
  var fileType = file.type.toLowerCase();
  var fileSize = file.size;
  var fileSizeInMB = fileSize / (1024 * 1024);
  var error = false;
  if (fileType.indexOf('image') === -1) {
    $(input).parsley().addError('custom', {
      message: '请选择一个图片文件。',
      updateClass: true
    });
    $(input).focus();
    error = true;
  } else if (fileSizeInMB > 3) {
    input.value = '';
    $(input).parsley().addError('custom', {
      message: '文件大小应小于3 KB。',
      updateClass: true
    });
    $(input).focus();
    error = true;
  } else {
    $(input).parsley().reset();
  }
  console.log(error);
  if (error === true) {
    $('input[type="submit"]').prop('disabled', true);
  } else {
    $('input[type="submit"]').prop('disabled', false);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>

<button type="submit" name="submit" id="submit" class="btn btn-primary">更新</button>
英文:

I have added javascript code that should disable button when there is error for preventing form submission ,
I can see the error but button is not disabling and it's submitting the form ,

In the console.log i can see true also

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function() {
  $(&#39;#homePage&#39;).parsley();
  $(&#39;#image&#39;).on(&#39;change&#39;, function() {
    validateImage(this);
  });
});

function validateImage(input) {
  var file = input.files[0];
  var fileType = file.type.toLowerCase();
  var fileSize = file.size;
  var fileSizeInMB = fileSize / (1024 * 1024);
  var error = false;
  if (fileType.indexOf(&#39;image&#39;) === -1) {
    $(input).parsley().addError(&#39;custom&#39;, {
      message: &#39;Please select an image file.&#39;,
      updateClass: true
    });
    $(input).focus();
    error = true;
  } else if (fileSizeInMB &gt; 3) {
    input.value = &#39;&#39;;
    $(input).parsley().addError(&#39;custom&#39;, {
      message: &#39;File size should be less than 3 KB.&#39;,
      updateClass: true
    });
    $(input).focus();
    error = true;
  } else {
    $(input).parsley().reset();
  }
  console.log(error);
  if (error === true) {
    $(&#39;input[type=&quot;submit&quot;]&#39;).prop(&#39;disabled&#39;, true);
  } else {
    $(&#39;input[type=&quot;submit&quot;]&#39;).prop(&#39;disabled&#39;, false);
  }
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js&quot;&gt;&lt;/script&gt;

 &lt;button type=&quot;submit&quot; name=&quot;submit&quot; id=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Update&lt;/button&gt;

<!-- end snippet -->

答案1

得分: 1

请使用以下代码,它将有效:

<!DOCTYPE html>
<html>
<head>
  <title>示例</title>
</head>
<body>
 <button type="submit" name="submit" id="submit" class="btn btn-primary">更新</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

  <script>
  
    $(function() {
    $('#homePage').parsley();
    $('#image').on('change', function() {
      validateImage(this);
    });
  });

  function validateImage(input) {
    var file = input.files[0];
    var fileType = file.type.toLowerCase();
    var fileSize = file.size;
    var fileSizeInMB = fileSize / (1024 * 1024);
    var error = false;

    if (fileType.indexOf('image') === -1) {
      $(input).parsley().addError('custom', { message: '请选择一个图像文件。', updateClass: true });
      $(input).focus();
      error = true;
    } else if (fileSizeInMB > 3) {
      input.value = '';
      $(input).parsley().addError('custom', { message: '文件大小应小于3 KB。', updateClass: true });
      $(input).focus();
      error = true;
    } else {
      $(input).parsley().reset();
    }

    console.log(error);

    if (error === true) {
      $('#submit').prop('disabled', true); // 修正的选择器
    } else {
      $('#submit').prop('disabled', false); // 修正的选择器
    }
  }
  </script>
</body>
</html>

不包括代码部分的翻译。

英文:

Hi,
Please use this code it will work

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button type=&quot;submit&quot; name=&quot;submit&quot; id=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Update&lt;/button&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {
$(&#39;#homePage&#39;).parsley();
$(&#39;#image&#39;).on(&#39;change&#39;, function() {
validateImage(this);
});
});
function validateImage(input) {
var file = input.files[0];
var fileType = file.type.toLowerCase();
var fileSize = file.size;
var fileSizeInMB = fileSize / (1024 * 1024);
var error = false;
if (fileType.indexOf(&#39;image&#39;) === -1) {
$(input).parsley().addError(&#39;custom&#39;, { message: &#39;Please select an image file.&#39;, updateClass: true });
$(input).focus();
error = true;
} else if (fileSizeInMB &gt; 3) {
input.value = &#39;&#39;;
$(input).parsley().addError(&#39;custom&#39;, { message: &#39;File size should be less than 3 KB.&#39;, updateClass: true });
$(input).focus();
error = true;
} else {
$(input).parsley().reset();
}
console.log(error);
if (error === true) {
$(&#39;#submit&#39;).prop(&#39;disabled&#39;, true); // Corrected selector
} else {
$(&#39;#submit&#39;).prop(&#39;disabled&#39;, false); // Corrected selector
}
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月13日 17:49:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76678057.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定