JQuery 移动表单验证答案

【问题标题】：JQuery mobile form validationJQuery 移动表单验证
【发布时间】：2011-07-29 14:49:41
【问题描述】：

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

在他们的网页上，这些代码可以正常工作，但是当我在 mylocalHost 上使用它时，它就不起作用了。我只能看到 HTML 代码的结果。我在这里包含了代码。请如果有人知道出了什么问题，我该怎么办，请告诉我！

HTML 代码：

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

【问题讨论】：

有什么错误吗？调试控制台中有什么？

标签： javascript jquery html css jquery-mobile

【解决方案1】：

我猜你现在已经解决了这个问题，但是validval 示例正在处理简单的HTML，而JQuery mobile 将增强你的html。

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

【讨论】：