Member 13504137 Ответов: 1

Простая кодовая ошибка ?

Не работает, когда я нажимаю кнопку Отправить.

                $(document).ready(function(){
                $("#submit-button").click(function(e){

		        var firstName = $("#first-name").val();
                var name_regex = /^[a-zA-Z]+$/;
        if(firstName.length == 0){
			$("#p1").text("*Field must be filled!*");
			$("#first-name").focus();
		}

		else if(!firstName.match(name_regex) || firstName.length == 0 ){
			$("#p1").text("Please use alphabets only.");
			$("#first-name").focus();
		}
	});
});
<input id="submit-button" type="submit" name="submit" value="Submit">

What I have tried:

I've tried to use /-----/i regex instead of /------/. 
I've tried to use alert instead of $("p").text();
I've checked my script src link.

Richard MacCutchan

Что значит "не работает" означает?

Member 13504137

Если я ввожу номер в поле Имя, я ожидаю, что сообщение появится под полем ввода, когда я нажму на кнопку Отправить. Я ожидаю этого, потому что это не соответствует регулярному выражению, которое я написал.

1 Ответов

Рейтинг:
6

Richard Deeming

Ваш код работает, но страница отправляется до того, как сообщение может быть показано.

Вам нужно позвонить e.preventDefault() если проверка не пройдена:

$(function(){
    $("#submit-button").click(function(e){
        var firstName = $("#first-name").val();
        if (firstName.length === 0){
            $("#p1").text("*Field must be filled!*");
            $("#first-name").focus();
            e.preventDefault();
            return;
        }

        if (!firstName.match(/^[a-zA-Z]+$/)){
            $("#p1").text("Please use alphabets only.");
            $("#first-name").focus();
            e.preventDefault();
            return;
        }
    });
});

Возможно, Вам будет лучше посмотреть на плагин проверки jQuery[^] вместо.

Member 13504137

Это сработало.. :) большое спасибо! Я собираюсь прочитать больше о плагине preventDefault() и jQuery Validation, как вы сказали.