2016-06-23 3 views
0

Я «немного» новичок в Scala, и изучаю Scala.js. У меня есть html-форма, и я пытаюсь взять строки из полей и сделать несколько шаблонов, чтобы увидеть, соответствуют ли они основным критериям.Scala.js jQuery: Получение текста из ввода html

Проблема, с которой я сталкиваюсь, относится к способу получения строк из каждого поля с помощью значения jQuery ("# ​​id"). Я заметил, что независимо от того, какую строку я вводить в поля, я получаю одно и то же предупреждение «Успех» для каждого поля. Когда я печатал результат метода jQuery(). Javascript-консоли, я всегда получаю «неопределенный», поэтому я предполагаю, что с этим проблема.

Насколько я могу судить, метод value возвращает scalajs.Dynamic, а не строку. Поэтому я не уверен, как просто получить текст из этих текстовых полей, и я уверен, что я что-то упустил. Вот мой код:

Файл index.html:

<html> 
<head> 
    <title>Learning JQuery</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 

    <style> 
     ...CSS... 
    </style> 
</head> 
<body> 

<script type="text/javascript" src="./target/scala-2.11/scala-js-tutorial-jsdeps.js"></script> 
<script type="text/javascript" src="./target/scala-2.11/scala-js-tutorial-fastopt.js"></script> 

<script type="text/javascript"> 
    Script().main(); 
</script> 
<div id="wrapper"> 
    <div id="error"></div> 

    <form id="validationForm"> 

     <label for="email">Email</label> 
     <input name="email" id="email"> 

     <label for="phone">Telephone</label> 
     <input name="phone" id="phone"> 

     <label for="pass">Password</label> 
     <input name="pass" type="password" id="pass1"> 

     <label for="pass">Confirm Password</label> 
     <input name="pass" type="password" id="pass2"> 
     <input id="submitButton" type="submit" value="submit"> 
    </form> 
</div> 
</body> 
</html> 

Script.scala:

import scalajs.js 
import org.scalajs.jquery.jQuery 

import js.annotation.JSExport 
import js.{Dynamic, JSApp} 
import js.Dynamic.{ global => g } 
/** 
    * Created by pslagle12 on 6/21/16. 
    */ 

@JSExport 
object Script extends JSApp { 

    implicit def dynamicToString(d: Dynamic): String = 
    d.toString 

    private val fieldsAndErrors = Map(
    ("email" -> "Please enter a valid email address"), 
    ("phone" -> "Please enter a valid phone number"), 
    ("pass1" -> "Please enter a matching password") 
) 

    private val regexTest = 
    """/^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)| 
    (\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\]) 
     |(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/""".r 

    lazy val email = jQuery("email").value 
    lazy val phone = jQuery("phone").value 
    lazy val pass1 = jQuery("pass1").value 
    lazy val pass2 = jQuery("pass2").value 

    @JSExport 
    def main(): Unit = { 

    jQuery("#validationForm").submit(
     fieldsAndErrors.keys foreach (x => { 
     if (errorChecker(x) == "") 
      g.alert("Success") 
     else 
      g.alert(errorChecker(x)) 
     } 
    ) 
    ) 
    } 

    def isValidEmailAddress(address: String): String = 
    if (!regexTest 
     .pattern 
     .matcher(address) 
     .matches()) { 
     fieldsAndErrors("email") 
    } else "" 

    def isValidPhone(number: String): String = 
    if (!number.isInstanceOf[Int]) 
     fieldsAndErrors("phone") 
    else "" 

    def isValidPass(pass1: String): String = 
    if (pass1 != pass2) 
     fieldsAndErrors("pass1") 
    else "" 

    def errorChecker(key: String): String = 

    key match { 
     case "email" => isValidEmailAddress(email) 
     case "phone" => isValidPhone(phone) 
     case "pass1" => isValidPass(pass1) 
     case _ => isValidPass(pass1) 
    } 
} 

PS: Я знаю, что есть некоторые другие ошибки в этом коде. Я в основном обеспокоен тем, как получить строку из текстового ввода с помощью JQuery api от Scala.js.

+0

Не могу поклясться, но попробуйте 'значение()' вместо 'value' - Я не уверены, что они взаимозаменяемы на уровне фасада. Хотя я признаюсь, я немного удивлен, что это даже компилируется: если вы поместите букву типа ': String' на« email »и т. П., Что произойдет? –

+0

Он компилируется. Он не привык, но я добавил неявное преобразование в верхней части файла, чтобы изменить динамические объекты на строки. Я не знаю, есть ли это «лучшая» вещь, но я довольно зелёный для Scala. Это мой первый код в нем после того, как я прошел через некоторые уроки в свое время. Я добавил() в конец ленивых голосов, но никаких изменений, кроме странного поля пароля, теперь говорит мне наоборот. Я ошибался в своем исходном сообщении: все они отправляют сообщения об ошибках, за исключением того, что пароль отправляется «Успешно» –

+0

Хотя я не программировал в Javascript в прошлом, я думаю, что это обычная задача, чтобы получить текст из текста поле. Удивленно это такая боль. Заставляет меня думать, что я пропускаю что-то больно очевидное или это связано с тем, как Scala.js обрабатывает JQuery. –

ответ

1

А, подождите секунду - я вижу вероятную проблему. Идентификаторы ваших вызовов jQuery неверны. Вы не можете сказать jQuery("pass1"), это должно быть jQuery("#pass1"), так же, как вы сделали для validationForm. # сообщает jQuery искать идентификатор с именем «pass1» - так оно и есть, я не уверен , что пытается найти, но это, вероятно, возвращает пустой набор объектов, поэтому .value ничего не производит ,

Это одна из наиболее распространенных (и легко сделать) ошибок в JQuery ...

+0

Большое спасибо! Я узнал об этом вопросе на ранней стадии, но это было после того, как я сделал ленивые деньги и, к сожалению, никогда не менял их в то время. –

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