Проблема: Onclick срабатывает после onblur на компьютерах Mac

Question

У нас есть пара текстовых полей в форме.Все из которых подтверждены onblur.Форма отправляется по щелчку тега привязки.

<script>
function validateMyText(){
    // do field validation
    // if success
    return true;
    // else {
    alert("Please check the text box value");
    return false;
    }
}
</script>

<form name="myform" action="mytestpage.jsp">
    <input type="text" name="myText" id="myText" onblur="return validateMyText()"/>
    <a href="#" onclick="mytestpage.jsp">Submit</a>
</form>

Браузеры на платформе Windows (Firefox, Safari, Chrome, IE): когда validateMyText () возвращает false, onclick не запускается.Это ожидаемое и существующее поведение.

Браузеры на платформе Mac (Firefox, Safari): даже после того, как validateMyText () возвращает false, запускается событие onclick, которое отправляет форму.

Фон: этоэто устаревшее приложение, которое поддерживалось только на платформе Windows и в браузере IE.Теперь он должен быть улучшен для работы во всех браузерах (Firefox, Safari, Chrome, IE) в Windows и Firefox, Safari в Mac.

Спасибо, Мэтью

Answer 1

Если я правильно прочитал, похоже, что приложение полагается на false, возвращаемое после события blur любого поля с «недопустимыми» данными, чтобы прервать отправку формы.Таким образом, в основе лежит предположение о том, что любое другое поле, которое не сфокусировано, является действительным, вы не можете оставить текстовое поле, не сделав его действительным, и что единственный способ, которым вы когда-либо нажимаете на тег привязки, это оставляя ранее выбранноетекстовое поле.Много предположений.Самое приятное, что нужно сказать, это то, что это хрупко - а как насчет пользователей, нажимающих Enter?

Как минимум, я бы создал новую функцию для обработки отправки формы.Я не знаю, что сейчас происходит с этим тегом привязки.Для ясности добавьте идентификатор в тег формы.Затем:

<a href="#" onclick="document.getElementById('myform').submit(); return false;">

Теперь щелчок по умолчанию будет подавлен, и вы запустите «естественное» поведение отправки формы.Поскольку мы хотим проверки перед отправкой, давайте добавим обработчик событий onsubmit на уровне формы:

<form name="myform" id="myform" action="mytestpage.jsp" onsubmit="return submitForm();">

Теперь мы пройдем проверку на уровне формы и вернем true для отправки, false ни за что.Добавьте что-то вроде этого в свой JavaScript:

function submitForm() {
    // identify fields eligible for validation
    // validate them according to your rules
    // then submit the form
    if( all_your_fields_are_valid ) { // for you to figure out
        return true;
    } else {
        // dialog explaining problem?
        // highlight bad fields?
        return false;
    }
}

Вы по-прежнему будете получать предупреждения о недействительных данных по каждому полю, но теперь, по крайней мере, вы явно перехватываете отправку формы и смотрите насформировать как сущность со своими собственными действительными и недействительными состояниями.Такая установка должна прекрасно работать в любом достаточно современном браузере на любой платформе.

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