2013-09-12 2 views
0

Я хочу сделать проверку на стороне клиента в моем проекте. Здесь требование состоит в том, что если пользователь отправил пустую форму или он не ввел ни одного поля ввода, тогда должен быть создан нормальный список html. Под этим списком должны быть все поля ввода, у которых есть ошибка. Не только поле ввода, но и ссылка на это поле ввода. После того, как ссылки вошли в этот список, пользователь должен иметь возможность щелкнуть по этой ссылке. после нажатия на эту ссылку, его фокус должен быть установлен в текстовое поле. Здесь я мог бы создать ссылку правильно, но я не могу установить фокус. Так вот мой CoffeeScript:coffeescript фокус не устанавливается в моем поле

$(document).ready -> 
# first fetch all input field who have errors. 
    errorElements = $('.content').find('.help-inline').prev() 
    ul = $('<ul id="errorlist"></ul>') 
    errorElements.each (i) -> 
    span = $(this).next() 
    labelText = $(this).parent().parent().find('label') 
    $(' <li> <a href="#' + $(this).attr('id') + '" class="errorlink" >' + labelText.text() + ' ' + '(' + span.text() + ')' + '</a></li>').appendTo(ul) 
    $('#errorcontainer').html(ul) 
$(".errorlink").bind "click", (e) -> 
    # first I am checking it is binding or not. 
    alert('hello') 
    $(this).attr(‘href’).setFocus() 

Я использую simple_form для моего HTML. Так что генерирует HTML для меня, как это:

<div class=' content '> 


<form accept-charset=" 

UTF-8 "действие =" "класс =" /уровни/базового компьютера/темы simple_form форма горизонтальной "ENCTYPE =" многочастному/форм-данных "ID =" new_topic "метод =" пост "NOVALIDATE =" NOVALIDATE «>

<div style=" margin:0;padding:0;display:inline "> 

<div class=' form-inputs'> 
    <div class=" control-group string required topic_title error "> 
    <label class=" string required control-label " for=" topic_title "> 
    <abbr title=" required "> 
    * 
    </abbr> 
    Title 
    </label> 
    <div class=" controls "> 
    <input class=" string required " id=" topic_title " name=" topic[title] " size=" 50 " type=" text " value="" /> 
    <span class=" help-inline "> 
    can't be blank 
    </span> 
    </div> 
    </div> 

Что я здесь не так?

+0

Вы не .help-рядный класс в вашем HTML и, как сказал Зета, нет и никакого. Они должны быть добавлены для работы вашего кода. – TheRocketSurgeon

+0

Я обновил свой ответ. и эта строка, содержащая класс «help-inline»: не может быть пустым Vishal

+0

Я создаю динамические ссылки из jquery здесь. – Vishal

ответ

0

У меня создалось впечатление, что достаточно использовать .фокус() на объекте jQuery.

jQuery API Docs: Focus

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

$(this).focus() 

Также я заметил, что вы связать код outdented из $ (document) .ready block.

Еще один совет в CoffeeScript $ -> не стенография для $ (документ) .ready ...

Например

$ -> 
    # do something after the document is ready 
+0

Да, я вложил в блок отступов, но все же он не работает. :( – Vishal

Смежные вопросы