jQuery - 验证表单答案

【问题标题】：jQuery - validate formjQuery - 验证表单
【发布时间】：2013-10-07 22:20:35
【问题描述】：

我尝试了此代码，但即使输入尚未验证，它仍会提交表单。

这是我的表单的代码：

<a style="cursor: pointer;" id="upload_image">Upload Image</a></li>

<?php
 $attributes = array('id' => 'upload_form'); 
 echo form_open_multipart('c=web_page&m=upload_img', $attributes); 
?>

<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>
<?php echo form_cose(); ?>

这是我的 jQuery 的代码：

$("#upload_image").click(function(){
 $("#photosubmit").click();
  if( $('photosubmit').val() != "") //
   $("#upload_form").submit();
});

所以这是我的问题：

我如何确保在我提交此表单之前，我的输入已经有一个值..？

【问题讨论】：

'upload_form'); echo form_open_multipart('c=web_page&m=upload_img', $attributes); ?>
那个是表单元素，我使用codeigniter作为我的web应用框架。
您的表单，无论您如何呈现它，都需要onsubmit="return false;"。见：stackoverflow.com/questions/8664486/…
但是一旦我设置它返回false，它就不会提交表单了。
Zhul，看看更新的解决方案。我敢肯定，它现在可以工作了。

标签： javascript php jquery forms codeigniter

【解决方案1】：

如果你想通过 id 获取元素，你应该这样做：

if( $('#photosubmit').val() != "")

代替：

if( $('photosubmit').val() != "")

更新答案：
在jQuery API documentation 的帮助下，我找到了一个完全可行的解决方案：

$("#the_form").submit(function(event) {
  if ( $( "input:first" ).val() !== "" ) {
    alert("The file input is valid.");
    return;
  }
  alert("The file input is not valid.")
  event.preventDefault();
});

https://jsfiddle.net/christianheinrichs/nbuzoxLv/2/

【讨论】：

控制台说什么？
没什么，它只是提交表单，不确保输入必须首先有一个值。
问题可能出在其他地方：检查this jsFiddle。无论文件是否被选中，它都会提交表单。我仍在努力解决这个问题。
在我的回答中。点击 jsFiddle 链接。
我不明白，仍然无法正常工作。我的浏览器没有任何反应。我们真的需要提交按钮来提交这个表单吗？

【解决方案2】：

试试

$("#upload_image").click(function (e) {
    e.preventDefault();
    if ($("#photosubmit").val() != "") 
           ^ //added # here
    $("#upload_form").submit();
});

参考文献

event.preventDefault

【讨论】：

仍然无法正常工作，除了 .val() 函数，还有其他方法可以用来确保我的输入文件已设置吗？
我认为文件输入在被点击之前已经有一个值了。

【解决方案3】：

检查返回的内容：

$("#photosubmit").val()

如果返回不同于空字符串的null。

试试这个：

if ($("#photosubmit").val()) {
    $("#upload_form").submit();
}

【讨论】：

还是不行，即使文件被选中还是不提交表单

【解决方案4】：

您的代码中缺少一个 #，它必须是：

$("#upload_image").click(function(){
 $("#photosubmit").click();
  if( $('#photosubmit').val() != "")
   $("#upload_form").submit();
});

另外，#upload_image 点击事件是检查您的输入[type="file"] 是否已填满的正确事件吗？

【讨论】：

【解决方案5】：

经过一天的研究，我尝试了这个，它有效。只有在您对文件输入类型表单进行了任何更改（例如，您要上传新文件）后，它才会提交表单。

$("#upload_image").click(function () {
  $("#photosubmit").click().change(function(){
    $("#upload_form").submit();
  });
});

希望以后能对大家有所帮助。

【讨论】：