Как проверить пустые значения в двух полях, а затем запросить пользователя об ошибке, используя JavaScript - PullRequest
Новая
       7

Как проверить пустые значения в двух полях, а затем запросить пользователя об ошибке, используя JavaScript

0 голосов
/ 16 марта 2010

Я надеюсь, что смогу объяснить это правильно. У меня есть два поля ввода, в которые требуется ввести цену, чтобы пожертвование прошло и отправило.

Проблема, с которой я столкнулся, заключается в том, что мне хотелось бы, чтобы процесс проверки проверил, имеет ли одно из двух полей значение, если это так, а затем перейдите к отправке. Если оба поля пусты, то предупреждение.

Это то, что я сейчас имею в виду после добавления некоторых данных, которые я получил ранее сегодня: 

 function validate_required(field,alerttxt)
{ 
with (field) 
{ 
    if (value==null||value=="") 
    {
        alert(alerttxt); return false;
    } 
    else 
    {
        return true;
    } 
} 
}

function validate_form(thisform)
{
with (thisform)
{

    if (validate_required(billing_name_first,"You must enter your first name to donate")==false)
    {billing_name_first.focus();return false;}

    else if (validate_required(billing_name_last,"You must enter your last name to donate")==false)
    {billing_name_last.focus();return false;}

    else if (validate_required(billing_address_street1,"You must enter your billing street address to donate")==false)
    {billing_address_street1.focus();return false;}

    else if (validate_required(billing_address_city,"You must enter your billing address city to donate")==false)
    {billing_address_city.focus();return false;}

    else if (validate_required(billing_address_state,"You must enter your billing address state to donate")==false)
    {billing_address_state.focus();return false;}

    else if (validate_required(billing_address_zip,"You must enter your billing address zip code to donate")==false)
    {billing_address_zip.focus();return false;}

    else if (validate_required(billing_address_country,"You must enter your billing address country to donate")==false)
    {billing_address_country.focus();return false;}

    else if (validate_required(donor_email,"You must enter your email address to donate")==false)
    {donor_email.focus();return false;}

    else if (validate_required(card_number,"You must enter your credit card number to donate")==false)
    {card_number.focus();return false;}

    else if (validate_required(card_cvv,"You must enter your credit card security code to donate")==false)
    {card_cvv.focus();return false;}

    else if (validate_required(input1,"Need to enter a donation amount to continue")==false && validate_required(input2, "Need to enter a donation amount to continue")==false) 
    {
        input1.focus();
        return false;
    }
}
}

Это работает нормально ... кроме того, что я получаю сообщение с сообщением об ошибке undefined ... которое я нажимаю ок примерно 2 раза, затем получаю правильное предупреждение и вместо того, чтобы позволить мне исправить проблему в IE7 IE8 форма просто обрабатывает.

Спасибо, ребята, любая помощь будет делать

Мэтт

Ответы [ 5 ]

0 голосов
/ 17 марта 2010

Вот мой дубль с перефокусировкой на первое поле, которое не удалось: 

<body>

<form action="#" onsubmit="return validate(this);">
    <input type="text" name="val0" /><br />
    <input type="text" name="val1" /><br />
    <input type="submit" />
</form>

<script type="text/javascript">
    function validate(form) {
        var val0Elem = form.val0, val1Elem=form.val1, elementToFocus;
        // check fields and save where it went wrong
        if (!numeric(val0Elem.value)) {elementToFocus=val0Elem;}
        else if (!numeric(val1Elem.value)) {elementToFocus=val1Elem;}
        // if there is an element to focus now, some validation failed
        if (elementToFocus) {
            alert('Enter numbers in both fields, please.')
            // using select() instead of focus to help user
            // get rid of his crap entry :)
            elementToFocus.select();
            // ..and fail!
            return false;
        }
        // Helper function, "if a string is numeric":
        // 1: it is not 'falsy' (null, undefined or empty)
        // 2: it is longer than 0 too (so that '0' can be accepted)
        // 3: it passes check for numericality using the builtin function isNaN
        function numeric(s) {return (s && s.length>0 && !isNaN(s));}
    }
</script>

</body>
0 голосов
/ 17 марта 2010 
var msg = "Need a donation amount to continue";

function validate_required(value) {
    if(isNaN(value) || value == null || value == "") {
        return false;
    }
    return true;
}


function validate_form(thisform) {
    var i1 = validate_required($(thisform.input1).val());
    var i2 = validate_required($(thisform.input2).val());
    if(!(i1 && i2)) {
        alert(msg);
        thisform.input2.focus();
        return false;
    }
}
0 голосов
/ 17 марта 2010

уберите оповещение () из своей функции оценки - вы пытаетесь сделать слишком много одновременно.функция, чтобы определить, является ли ввод действительным или нет, должна делать только одну вещь.

сначала определите состояние ваших входов, а затем сделайте что-то вроде 

var field1Pass = validate_required(input1);
var field2Pass = validate_required(input2);

if ( !(field1Pass && field2Pass)  ) {
    alert("Need a donation amount to continue");
    // TODO: logic to determine which field to focus on
    return false;
}
0 голосов
/ 17 марта 2010

Если я правильно понимаю, вы можете сделать предупреждение только в том случае, если оба ввода пусты. Если это так, вот рефакторинг вашего кода, который с этим справится. 

function validate_required(field) 
{ 
    with (field) 
    { 
        if (value==null||value=="") 
        {
            return false;
        } 
        else 
        {
            return true;
        } 
    } 
} 
function validate_form(thisform) 
{ 
    with (thisform)
    { 
        if (validate_required(input1)==false && validate_required(input2)==false) 
        {
            alert('Need a donation to continue');
            input1.focus();
            return false;
        }
    } 
}
0 голосов
/ 16 марта 2010

Посмотрите на плагин проверки jQuery . С плагином было бы просто правильно настроить правила. Если хотите, вы можете стать более любопытным и заменить сообщения по умолчанию. Посмотрите примеры. 

<script type="text/javascript">
    $(function() {
       $('form').validate({
            'input1': {
                  required: {
                      depends: function() { $('#input2').val() == '' }
                  }
             }
       });
    });
</script>

Это устанавливает его так, что input1 требуется, если input2 пусто, что должно быть достаточно, поскольку, если input1 имеет значение, вам не нужно input2, и если ни одно из них не имеет значения, это покажет ваше сообщение для input1. 

<input type="text" name="input1"  />
<input type="text" name="input2"  />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...