按提交html后顯示圖像

Question

按提交后，我有以下代碼顯示圖像

<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，因此我似乎無法通過其他任何驗證（例如，檢查名稱字段是否為null）來傳遞它。

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

是否可以在我的else語句中粘貼一個與此等效的Javascript，以便僅在表單實際提交正確且事先通過驗證檢查的情況下才顯示它？

謝謝

Answer 1

在jquery中做所有的事情。

if (name==null || name=="")
{
alert("First name must be filled out");
return false;
}
else
{
$('#image1').show()
}

Answer 2

您應該使用jQuery的.submit()事件處理程序，而不是將onclick屬性附加到.submit()按鈕。 如果用戶通過Enter鍵提交表單， 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();

});

Answer 3

首先，從“提交”按鈕中刪除onclick屬性：

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

由於您使用的是jQuery，因此在JavaScript中將處理程序附加到click事件很容易（這也是一種好習慣）。

我幾乎總是使用以下模式進行表單驗證（以及在form submit時，而不是click “ submit按鈕，因為除了click按鈕之外，還有其他提交表單的方法）。

$(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.
    });
});