JQuery移动表单验证

时间:2011-07-29 14:49:41

标签: javascript jquery html css jquery-mobile

我正在使用Jquery mobile,我使用validVal作为验证方法。 我使用了网站上的以下代码:http://validval.frebsite.nl/examples.php

在他们的网页上,代码工作得很好,但是当我在mylocalHost上使用它时它不会工作。我只能看到HTML代码的结果。 我在这里列出了代码。如果有人知道我该怎么做错,请告诉我!

HTML CODE:

    <form id="form8" class="form-wrapper" action="#ex8" method="post">
    <div>
        <label for="name_8">Name</label>
        <input id="name_8" class="required placeholder" type="text" name="name_8" value="This field is required." size="24" /><span class="error">Please enter your name.</span></div>
    <div>
        <label for="email_8">E-mail</label>
        <input id="email_8" class="required email placeholder" type="text" name="email_8" value="This field is required." size="24" /><span class="error">Enter a valid e-mailaddress.</span></div>
    <div>
        <input type="submit" name="submit_8" value="Submit" />
    </div>
</form>

CSS:

    input[type='text'], textarea, select {
    border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus {
    border-color: #000 !important;
}
input[type='text'].invalid, textarea.invalid, select.invalid {
    border-color: red;
}
input[type='text'].inactive, textarea.inactive, select.inactive, option.inactive {
    color: #999;
    font-style: italic;
}
input[type='text'].required, textarea.required {
    background: url(required-input.png) right 5px no-repeat;
}
span.error {
    font-weight: bold;
    color: red;
    border: 1px solid red;
    padding: 4px 15px;
    margin: 0 0 0 15px;
    display: none;
}

的javascript

    $( "#form8" ).validVal({
    invalidFieldFunc : function( $field, $form, language ) {
        $field.next().stop().fadeIn();
    },
    validFieldFunc : function( $field, $form, language ) {
        $field.next().stop().fadeOut();
    },
    invalidFormFunc : function( field_arr, $form, language ) {
        alert( field_arr[ 0 ].next().text() );
    }
});

1 个答案:

答案 0 :(得分:0)

我猜你现在已经解决了这个问题,但是有效的例子正在处理简单的HTML,而JQuery mobile会增加你的html。

您的错误范围不是$ field.next()。