2012-05-07 66 views
1

雖然點擊提交,但會顯示最後一個元素的錯誤消息(在這種情況下,「請選擇您正在尋找的性別」,並單擊表單外的任意位置它返回的第一個元素的錯誤消息。 我想該錯誤消息顯示第一個無效的元素。 請看附件中的代碼。Jquery form validate返回最後一個元素的錯誤消息

$(function() { 
    var form = $('.register form'); 
    var checkNameResult = $('#checkname-result'); 
    var validator = form.validate({ 
     errorPlacement: function (error, element) { 
      checkNameResult.empty(); 
      checkNameResult.append(error); 
     } 
    }); 

    $('#Register_UserName').rules("add", { 
     required: true, 
     remote: "/account/IsUsernameAvailable", 
     messages: { 
      required: "Please enter a name", 
      remote: "Name is not available" 
     } 
    }); 
    $("#Register_FirstName").rules("add", { 
     required: true, 
     messages: { 
      required: "Please enter your first name" 
     } 
    }); 
    $("#Register_LastName").rules("add", { 
     required: true, 
     messages: { 
      required: "Please enter your last name" 
     } 
    }); 


    $("#Register_Password").rules("add", { 
     required: true, 
     messages: { 
      required: "Please enter a valid password" 
     } 
    }); 

    $("#Register_Email").rules("add", { 
     required: true, 
     email: true, 
     messages: { 
      required: "Please enter your email address", 
      email: "Please enter a valid email address" 
     } 
    }); 

    $("#Register_Gender_Male").rules("add", { 
     required: true, 
     messages: { 
      required: "Please select your gender" 
     } 
    }); 

    $("#Register_InterestedInMale").rules("add", { 
     required: function (element) { 
      return $('#Register_InterestedInFemale:checked').length == 0; 
     }, 
     messages: { 
      required: "Please select an Interested In gender" 
     } 
    }); 

    $("#Register_InterestedInFemale").rules("add", { 
     required: function (element) { 
      return $('#Register_InterestedInMale:checked').length == 0; 
     }, 
     messages: { 
      required: "Please select a gender you are Looking For" 
     } 
    }); 

    $('#checkname').click(function() { 
     if (validator.element($('#Register_UserName'))) 
      checkNameResult.html("<label class='name-available'>Name is available</label>"); 
     return false; 
    }); 

}); 

回答

0

嗯,我從來沒有嘗試驗證這樣的形式。

使用jquery。驗證插件:

$(".selector").validate({ 
    rules: { 
     name: "required", 
     email: { 
      required: true, 
      email: true 
     } 
    }, 
    messages: { 
     name: "Please specify your name", 
     email: { 
      required: "We need your email address to contact you", 
      email: "Your email address must be in the format of [email protected]" 
     } 
    } 
}); 

我已經用Symfony2,Wordpress,CodeIgniter進行了測試。