Question

我正在测试JQUery Tools，并尝试使用模式表单处理其验证设置。

我有一个CSS问题，因为关闭模式窗体时验证的错误消息不会消失。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> 

<head> 
    <title>jQuery modal form test</title> 
    <!-- include the Tools --> 
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>   

    <!--- add styles --->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/validator/css/form.css"/>


<style>
    .modal {
        background-color:#fff;
        display:none;
        width:450px;
        padding:15px;
        text-align:left;
        border:2px solid #333;

        opacity:0.8;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        -moz-box-shadow: 0 0 50px #ccc;
        -webkit-box-shadow: 0 0 50px #ccc;
    }

    .modal h2 {
        background:url(/img/global/info.png) 0 50% no-repeat;
        margin:0px;
        padding:10px 0 10px 45px;
        border-bottom:1px solid #333;
        font-size:20px;
    }

    /* error message */
.error {
    height:15px;
    background-color:#FFFE36;
    font-size:11px;
    border:1px solid #E1E16D;
    padding:4px 10px;
    color:#000;
    display:none;   
    z-index: 10000;
    -moz-border-radius:4px;
    -webkit-border-radius:4px; 
    -moz-border-radius-bottomleft:0;
    -moz-border-radius-topleft:0;   
    -webkit-border-bottom-left-radius:0; 
    -webkit-border-top-left-radius:0;

    -moz-box-shadow:0 0 6px #ddd;
    -webkit-box-shadow:0 0 6px #ddd;    
}
    </style>
</head> 

<body> 

<p> 
    <div id="loginMenu">
<a href class="modalInput" rel="#register">Register</a>
    </div> 
</p> 

<div  class="modal" id="register">
<!-- signup form-->
    <form id="myform"  autocomplete="off" method="get" action=""  novalidate="novalidate">

    <fieldset>
    <p>
    <label>email *</label>
    <input  type="email" name="email" placeholder="email..." required="required"/></p> 
    <p>
    <label>username *</label>
    <input type="text" name="username" placeholder="username..." pattern="[a-zA-Z]{5,}" required="required"/>       
    </p>
    <p>
    <label>password *</label>
    <input type="text" name="password" placeholder="password..." />     
    </p>
    <p>
    <label>confirm password *</label>
    <input type="text" name="password2" placeholder="password..." />        
    </p>
    <p>
        <button type="submit">Sign Up</button>
        <button type="button" class="close"> Cancel </button>
    </p>
       </fieldset>
    </form>
</div>

<script> 
$(document).ready(function() {

var triggers = $(".modalInput").overlay({

    // some mask tweaks suitable for modal dialogs
    mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
    },

    closeOnClick: false
});

// initialize validator and add a custom form submission logic
$("#myform").validator().submit(function(e) {

    var form = $(this);

    // client-side validation OK.
    if (!e.isDefaultPrevented()) {

        // submit with AJAX
        $.getJSON("processSignup.cfm?" + form.serialize(), function(json) {

            // everything is ok. (server returned true)
            if (json === true)  {
                // close the overlay
                triggers.eq(0).overlay().close();
                $("#loginMenu").html("<a href='logout.cfm'>Log out</a>");

            // server-side validation failed. use invalidate() to show errors
            } else {
                form.data("validator").invalidate(json);
            }
        });

        // prevent default form submission logic
        e.preventDefault();
    }
});



});
</script> 

</body> 

</html>

当我关闭模态表单时，我是否会收到错误消息（最好是重置）？

Answer 1

将您的触发变量更改为：

var triggers = $(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#ebecff',
            loadSpeed: 200,
            opacity: 0.9
        },

        closeOnClick: false,
        onClose: function () {
            $('.error').hide();
        }
    });

使用jquery工具创建模态表单，CSS问题，错误消息不隐藏

1 个答案: