1

按提交后，我有以下代码来显示图像

<img id="image1" src="images/Coverflow1.jpg" style="display:none;"/>
<input type="submit" name="submit" value="submit" onclick="$('#image1').show()"/>

名称由以下人检索

var y=document.forms["myForm"]["fname"].value;

fname 在哪里

<h4>Name: <input type="text" name="fname" size="61" /></h4>

唯一的问题是这是使用 Jquery，所以我似乎无法通过我的任何其他验证，例如检查名称字段是否为空。

if (name==null || name=="")
    {
    alert("First name must be filled out");
    return false;
    }

是否有与此等效的 Javascript 可以粘贴在我的 else 语句中，因此只有在表单实际提交并事先通过验证检查时才会显示它？

谢谢

4

3 回答 3

3

在 jquery 中完成所有这些操作。

if (name==null || name=="")
{
alert("First name must be filled out");
return false;
}
else
{
$('#image1').show()
}
于 2013-05-30T14:02:49.323 回答
2

您应该使用.submit()jQuery 的事件处理程序，而不是将onclick属性附加到提交按钮。如果用户通过回车键提交表单，该onclick属性将不会触发其功能；但是，该.submit()方法也会捕获它。

$("form[name=myForm]").submit(function(e) {
  //get value of name here.
  var name = this.fname.value; //this refers to the form, because that is what is being submitted.

  //Do validation.
  if (name == null || name == "") {
      //If failed, then prevent the form from submitting.
      alert("First name must be filled out.");
      e.preventDefault();
      return;
  }

  //If validation passed, show image.
  $("#image1").show();

});
于 2013-05-30T14:03:19.033 回答
0

首先，onclick从提交按钮中删除属性：

<img id="image1" src="images/Coverflow1.jpg" style="display:none;"/>
<input type="submit" name="submit" value="submit" />

由于您使用的是 jQuery，因此在 JavaScript 中将处理程序附加到单击事件是一件轻而易举的事（这也是一个很好的做法）。

我几乎总是使用以下模式进行表单验证（并且在按钮submit上form，而不是click在submit按钮上，因为除了单击按钮之外还有其他提交表单的方法）。

$(document).ready(function () {
    var formIsValid = function formIsValid () {
        // your validation routines go here
        // return a single boolean for pass/fail validations
        var name =document.forms.myForm.fname.value;
        return !!name; // will convert falsy values (like null and '') to false and truthy values (like 'fred') to true.
    };
    $('form').submit(function (e) {
        var allGood = formIsValid();
        if (!allGood) {
            e.preventDefault();
        }
        $('#image1').toggle(allGood); // hide if validation failed, show if passed.
        return allGood; // stops propagation and prevents form submission if false.
    });
});
于 2013-05-30T14:14:53.630 回答