Xác thực hộp thoại UI của jQuery mà không sử dụng các thẻ <form>

Question

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ có vẻ là plugin xác thực jquery tốt nhất hiện có. Tôi dường như không thể làm cho nó hoạt động trong hộp thoại jQuery UI.

Mã này hoạt động bên ngoài của DIV thoại:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("form").validate(); 
    $("a").bind("click", function() { alert($("form").valid()); }); 
}); 
</script> 

<form method="get" action=""> 
    <p> 
    Name 
    <input id="name" name="name" class="required" minlength="2" /> 
    </p> 
    <p> 
    E-Mail 
    <input id="cemail" name="email" size="25" class="required email" /> 
    </p> 
    <a href="#" id="clickTest">Click</a> 
</form> 

này hoạt động tuyệt vời. Khi tôi di chuyển biểu mẫu vào hộp thoại div, mở hộp thoại và nhấp vào liên kết, nó sẽ trả về true, không có bueno.

Có cách nào để sử dụng plugin xác thực jquery sát thủ này mà không phải sử dụng thẻ <form> không? Hoặc là có một cách tốt hơn để làm điều này thành công?

Answer 1

Trong trường hợp ai đó đi qua này, hộp thoại jQuery-UI không gắn liền với các hình thức, nó gắn ngay trước </body>, vì vậy các yếu tố để xác thực nằm ngoài phần <form></form>:

Để giải quyết vấn đề này, chỉ cần chuyển hộp thoại để tự di chuyển trong biểu mẫu khi bạn tạo, như sau:

$("#mydiv").dialog("open").parent().appendTo(jQuery("form:first")); 

Answer 2

Các bạn đã thử gói dưới dạng xung quanh div của bạn thay vì (theo spec W3C thẻ hình thức không được phép ở bên trong div.)

Nếu không tái viết plugin Tôi không thấy một cách dễ dàng tại sao làm điều này không có phần tử biểu mẫu.

Answer 3

Hãy thử đặt id của bạn dưới dạng "myform".

Sau đó, hãy thử thêm cuộc gọi này đến sự kiện onclick của neo clicktest của bạn:

onclick = 'trở lại ($ ("# MyForm") validate() dạng()..);'

thay vì thực hiện xác thực trong tài liệu.đã có.

Answer 4

Tôi đã quyết định đi với this jQuery validation plugin và viết plugin của riêng mình xung quanh mã hiện có.

Answer 5

Bạn có thể sử dụng valitidy jquery plugin

Các javascript

function validateForm(){ 
    $.validity.start(); 
    // Required: 
    $("#recipientFirstName").require(); 
    var result = $.validity.end(); 
    return result.valid; 
} 

$(document).ready(function() { 
    $('#dialog').dialog({ 
     autoOpen: false, 
     title: 'My title', 
     width: 600, 
     modal: true, 
     buttons: { 
      "Ok": function() { 
       if(validateForm()) { 
        saveOrder(); 
        $(".validity-tooltip").css("display", "none"); 
        $(this).dialog("close"); 
       } 
      }, 
      "Cancel": function() { 
       // The following line was added to 
       // hide the tool-tips programmatically:   
       $(".validity-tooltip").css("display", "none"); 
       $(this).dialog("close");  
      } 
     } 
    }); 
}) 

Answer 6

Tôi biết câu hỏi này cũ, nhưng tôi cũng gặp phải vấn đề này, vì vậy tôi đăng giải pháp của mình.

Nếu bạn muốn giữ jQuery plugin xác nhận (mà dường như lựa chọn tốt nhất) và không muốn để di chuyển hộp thoại xung quanh như Nick Craver gợi ý, bạn chỉ có thể thêm video này vào các <form> tag:

onsubmit="return false;" 

Điều này sẽ ngăn không cho biểu mẫu được gửi đi. Nếu bạn cần gửi nó trong một số trường hợp đặc biệt, hãy thay đổi giá trị trả lại này khi cần.

Answer 7

xem bản vá này với jQuery.validationEngine phổ biến để cho phép các thẻ không phải dạng là mục tiêu xác thực.

https://github.com/posabsolute/jQuery-Validation-Engine/pull/101

nếu bạn thấy điều này đáng giá trong khi, để lại nhận xét ...hiện tại tác giả sẽ không kéo bản vá.

Answer 8

Giải pháp Nick Craver làm việc cho tôi, tuy nhiên nó không hoạt động hoàn toàn với IE7.

Có lỗi trong IE7 nơi không tôn trọng chỉ mục z cho các phần tử lồng nhau; do đó, nếu bạn di chuyển cha mẹ của hộp thoại vào biểu mẫu, lớp phủ sẽ nằm trên hộp thoại, ngăn người dùng tương tác với hộp thoại. Bản sửa lỗi cho IE7 là đặt chỉ mục z của lớp phủ thành -1, sau đó sao chép phần tử lớp phủ và thêm nó vào biểu mẫu giống như bạn đã làm cho hộp thoại. Sau đó, trong sự kiện gần của hộp thoại, hãy xóa lớp phủ nhân bản. IE7 Z-Index Layering Issues

Tùy thuộc vào bố cục trang web của bạn, bạn có thể chỉ cần di chuyển lớp phủ và không cần sao chép lớp phủ. Tôi phải sao chép nó, vì bố cục trang web của tôi có lề trái và lề phải, và tôi cần lớp phủ để che phủ toàn bộ khu vực. Dưới đây là một ví dụ về những gì tôi đã làm:

var $dialog = $('#myDialog'); 
var $form = $dialog.parents('form:first'); 

$dialog.dialog({ 
    autoOpen: false, 
    title: 'My Dialog', 
    minWidth: 450, 
    minHeight: 200, 
    modal: true, 
    position: ['center', 'center'], 
    close: function() { 
     // IE7 BUG: Needed to add an additional overload because of the z-index bug in IE7. 
     $('.ui-widget-overlay-ie7fix:first').remove(); 
    }, 
    buttons: dialogButtons 
}); 

$form.prepend($dialog.parent()); 
$dialog.dialog('open'); 

if ($.browser.msie && $.browser.version.slice(0, 1) == "7") { 
    var $overlay = $('body .ui-widget-overlay:first'); 
    $form.prepend($overlay.clone().addClass('ui-widget-overlay-ie7fix')); 
    $overlay.css('z-index', '-1'); 
} 

Cảm ơn, Garry

Answer 9

này có thể hoặc không có thể liên quan tuy nhiên điều này là vấn đề và giải pháp của tôi:

tôi đã có vấn đề chính xác cùng, khi tôi mở hộp thoại, thẻ "form" của tôi đã được thay thế bằng thẻ "div".

này là vì tôi đặt hộp thoại trong một yếu tố hình thức đã được mở ra, (rõ ràng là bạn không thể có một hình thức trong một hình thức)

Dont làm những gì tôi đã làm :)

<form> 
    <form> 

    </form> 
</form> 

Answer 10

Gần đây tôi đã tạo một plugin để xác thực Mẫu HTML. Bạn có thể tự mình thử. Prashant-UI-Validator

Tạo bằng Jquery, hỗ trợ Bootstrap và bạn có thể định cấu hình theo cách của mình. Nó hỗ trợ các kiểu dữ liệu khác nhau như INT, STRING, NUMERIC, MAX [Num], MIN [Num], EMAIL và quan trọng nhất là mã xác thực javascript tùy chỉnh của bạn.

Hy vọng nó giúp,

Answer 11

Tôi đã sử dụng một này nó hoạt động trong IE8, trên một ứng dụng asp.net sử dụng jQuery 1.11.2 và 1.13.1 jQueryValidate:

$('#lnz_NuevoLink').click(function() { 
     $("#lnz_AgregarDiv").dialog("open").parent().appendTo(jQuery("#aspnetForm")); //Add the dialog to the form  
     $("#lnz_AgregarDiv").parent().attr('style', 'z-index: 101');    //To avoid the modal 
     $("#lnz_AgregarDiv").dialog("option", "position", { my: "center", at: "center", of: window }); //To center the dialog 
    })