Кнопка ввода не работает в форме Jquery - PullRequest
Новая
       6

Кнопка ввода не работает в форме Jquery

0 голосов
/ 17 ноября 2011

Я использую следующую или аналогичную настройку для всего моего кода. Я понимаю, что если вы пропустите ВСЕ поля и войдете только в последнее поле, независимо от того, какое поле будет последним ... форма отправляется ... Я хочу запретить отправку формы, если детали (флаг 1) 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>

<form name="m2mform" id="m2mform" method="post" onsubmit="return form()" >
u:<input id="user" name="user" type="text" value="">
email:<input id="email" name="email" type="text" value="">
<input class="submitx" type="button" onClick="javascript:form();"/>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
flag = 1;
function form() {
    if (document.getElementById("user").value == "") {
        // slidedown some red css
        flag = 1;
    } else {
        // dont show red css 
        flag = 0;
    }
    if (document.getElementById("email").value == "") {
        // slidedown some red css
        flag = 1;
    } else {
        // dont show red css 
        flag = 0;
    }
    if (flag == 1) {
        // dont submit form
    }
    else {
        var submitForm;
        submitForm = document.getElementById("m2mform");
        submitForm.submit();
    }
}
</script>
</body>
</html>

Обновлено с другой попытки: 

var flag = 0;
function nValidateForm() {
    var flag = 0;
    if (document.getElementById("fullname").value == "") {
        $('#fullnamefail').slideDown("fast");
        flag = 1;
    }
    else {
        $('#fullnamefail').slideUp("fast");
        flag = 0;
    }

    if (flag == 1) {
        $('#error').fadeIn('slow');
        return false;
    }
    else {
        var custForm;
        custForm = document.getElementById("m2mform");
        custForm.submit();
    }
}

Ответы [ 3 ]

1 голос
/ 17 ноября 2011

Ваша логика ошибочна.Вы не должны опускать флаг (изменить на 0), если он уже поднят (равен 1).Кроме того, вам не следует снова напрямую вызывать submit(), просто вернуть true или false.

Исправить с минимальными изменениями в исходном коде: 

flag = 0; //lower by default
if (document.getElementById("user").value == "") {
    // slidedown some red css
    flag = 1;
} else {
    // dont show red css 
}

if (document.getElementById("email").value == "") {
    // slidedown some red css
    flag = 1;
} else {
    // dont show red css 
}
if (flag == 1) {
    // dont submit form
    return false;
}
else {
    return true;
}

Это просто установит флаг на 0только один раз, сверху, и любая ошибка проверки приводит к поднятию флага.

Это будет работать, но, поскольку вы уже используете jQuery, рассмотрите возможность использования его мощности ... просто Google для "проверки формы jQuery" дляочень мощные и простые способы проверки ввода пользователя.

1 голос
/ 17 ноября 2011

вы пропускаете return false; здесь ... и скорее используете type="submit" вместо type="button" (вам не нужно объявлять вызов метода form() дважды, если вы правильно используете типsubmit)

например, с типом button: 

<form method="post" onSubmit="return form();">
    u:<input id="user" type="text" value=""><br />
    email:<input id="email" type="text" value=""><br />
    <input id="submit" type="button" value="submit" onClick="window.submitFromButton();" />
</form>
<script type="text/javascript">
window.form = function(sender) {
    var $user = $('#user');
    var $email = $('#email');
    $user.css('background-color', 'white');
    $email.css('background-color', 'white');
    var submitTheForm = true;
    if (!$user.val()) {
        $user.css('background-color', 'red');
        submitTheForm = false;
    }
    if (!$email.val()) {
        $email.css('background-color', 'red');
        submitTheForm = false;
    }
    return submitTheForm;
};
window.submitFromButton = function() {
    var $form = $('form');
    $form.submit();
}
</script>

см. Мой рабочий пример здесь
см. Мой рабочий пример со стилем здесь
см. Мой рабочий пример с типом button здесь

0 голосов
/ 17 ноября 2011

Чтобы отменить запуск события, вам нужно return false;, если вы не хотите отправлять свою форму в функции form(): 

<input class="submitx" type="button" onClick="javascript:form();"/>

function form() {

    ....    

    if (flag == 1) {
        return false;  // this will cancel the click event firing on the submit button
    }
    else {
        var submitForm;
        submitForm = document.getElementById("m2mform");
        submitForm.submit();
    }
}
...