onblur не будет работать, но onchange работает?

Question

Я что-то не хватает? мой сценарий onblur не работает, но он работает, если я устанавливаю его как onchange, у меня есть только эти два скрипта, которые запускают некоторую проверку на нескольких вставках HTML.

Цель сценария № 1 - проверить, есть ли пространство, указывающее, что пользователь имеет вход на имя и фамилию (там, вероятно, лучший способ)

цель сценария # 2, чтобы проверить, что пространство не является пустым, когда пользователь выходит из поля ввода

Javascript

// Script #1 
document.getElementById('name').onchange=function() { 
    var theName = document.getElementById('name').value; 

    if (theName.indexOf(' ') <= 0) { 
    document.getElementById('name_error').innerHTML = "Must include first and last name"; 
    } 
} 


    // Script #2 
document.getElementById('name').onBlur=function() { 
    if (document.getElementById('name').value=="") { 
    document.getElementById('name_error').innerHTML = "The name field is required"; 
    } 
} 

HTML

<label for="name" id="name_label">Name<span class="red">* </span></label><br> 
<span id="name_error" class="hint"></span> 
<input type="text" name="name" id="name" pattern="[A-Za-z0-9 ]" 
placeholder="Full name please" maxlength="25" autofocus required> 

Answer 1

У вас есть опечатку в коде, просто замените onBlur на onblur.

document.getElementById('name').onblur = function() { 
 
    if (document.getElementById('name').value === '') { 
 
    document.getElementById('name_error').innerHTML = 'The name field is required'; 
 
    } 
 
}

<label for="name" id="name_label">Name<span class="red">* </span></label><br> 
 
<span id="name_error" class="hint"></span> 
 
<input type="text" name="name" id="name" pattern="[A-Za-z0-9 ]" placeholder="Full name please" maxlength="25" autofocus required>

Также обратите внимание, что является лучшей практикой использовать addEventListener функции для обработки событий в вашем DOM элементов:

document.getElementById('name').addEventListener('blur', function(event) { 
    // your code... 
}); 

Отъезд this link, чтобы получить больше информации.

Answer 2

У вас есть опечатка в вашем коде: ее onblur. Не onBlur.

document.getElementById('name').onblur=function() { 
 
    if (document.getElementById('name').value=="") { 
 
    document.getElementById('name_error').innerHTML = "The name field is required"; 
 
    } else { 
 
    // do something with this 'name' 
 
    } 
 
}

<label for="name" id="name_label">Name<span class="red">* </span></label><br> 
 
     <span id="name_error" class="hint"></span> 
 
     <input type="text" name="name" id="name" pattern="[A-Za-z0-9 ]" 
 
     placeholder="Full name please" maxlength="25" autofocus required>