javascript - JQuery 移动表单验证

Question

我正在使用 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() );
    }
});

Answer 1

我猜你现在已经解决了这个问题，但是有效的例子是在简单的 HTML 上工作，而 JQuery Mobile 会增加你的 html。

您的错误跨度不会是 $field.next() 那个。