2015-05-20 2 views
0
<html lang="en" dir="ltr"><head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>jQuery Form Validator</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> 
</head> 
<form action="" id="registration-form"> 
<table border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>E-mail</td> 
    <td><input id="email" name="email" data-validation="email"></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td><label for="email" generated="true" class="error"></label></td> 
    </tr> 
    <tr> 
    <td>User name</td> 
    <td> <input id="user" name="user" data-validation="length alphanumeric" 
     data-validation-length="3-12" 
     data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)"></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td><label for="user" generated="true" class="error"></label></td> 
    </tr> 
    <tr> 
    <td>Password</td> 
    <td><input id="pass_confirmation" name="pass_confirmation" data-validation="strength" 
     data-validation-strength="2"></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td><label for="pass_confirmation"></label></td> 
    </tr> 
    <tr> 
    <td>Repeat password</td> 
    <td><input name="pass" data-validation="confirmation"></td> 
    </tr> 
    <tr> 
    <td>Birth date</td> 
    <td><input name="birth" data-validation="birthdate" 
     data-validation-help="yyyy-mm-dd"></td> 
    </tr> 
    <tr> 
    <td>Country</td> 
    <td><input name="country" id="country" data-validation="country"></td> 
    </tr> 
    <tr> 
    <td>Profile image</td> 
    <td><input name="image" type="file" data-validation="mime size required" 
     data-validation-allowing="jpg, png" 
     data-validation-max-size="300kb" 
     data-validation-error-msg-required="No image selected"></td> 
    </tr> 
    <tr> 
    <td>User Presentation (<span id="pres-max-length">100</span> characters left)</td> 
    <td><textarea name="presentation" id="presentation"></textarea></td> 
    </tr> 
    <tr> 
    <td colspan="2"><input type="checkbox" data-validation="required" 
     data-validation-error-msg="You have to agree to our terms"> 
    I agree to the <a href="..." target="_blank">terms of service</a></td> 
    </tr> 
    <tr> 
    <td><input type="submit" value="Validate"></td> 
    <td><input type="reset" value="Reset form"></td> 
    </tr> 
</table> 
</form> 
</body> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.1/jquery.form-validator.min.js"></script> 
<script> 

    $.validate({ 
    modules : 'location, date, security, file', 
    onModulesLoaded : function() { 
     //$('#country').suggestCountry(); 

    } 

    }); 

    // Restrict presentation length 
    $('#presentation').restrictLength($('#pres-max-length')); 

</script> 
</html> 

Я изучал проверку формы, через некоторое время я нашел плагин jquery-form-validator, который поможет мне проверить. но теперь я пытаюсь выяснить, как изменить положение ошибки. Как теперь все ошибки отображаются перед именем поля. Я хочу, чтобы показать ошибку для электронной почты в этомразмещение ошибок в плагине jQuery-form-validator

<label for="user" generated="true" class="error"></label>

и есть ли форма проверки для PHP также

ответ

-1

Использование можно отнести их документацию здесь http://formvalidation.io/examples/showing-message-custom-area/ для области пользовательских сообщений об ошибках

или вы может использовать этот код:

err: { 
     container: '#messages' 
    }, 

Вы можете попробовать этот код в jQuery validation plugin co de каждого поля.

0

Используйте атрибут data-validation-error-msg-container указать местоположение сообщения об ошибке для определенного входа

<input data-validation="..." 
     data-validation-error-msg-container="#some-where-else" /> 
<div id="some-where-else"></div> 

у вас есть другие варианты, а когда дело доходит до этого. Вы можете прочитать об этом на http://formvalidator.net/#configuration_position

Смежные вопросы