CODEWITHSUNDEEP
jqueryscalascala.js
Patrick S.
Patrick S.

Reputation: 275

Scala.js jQuery: Getting the text from a html input

I am "somewhat" new to Scala, and am learning some Scala.js. I have a html form and am trying to take the strings from the fields and do some pattern matching to see if they meet basic criteria.

The problem I'm having refers to the method of getting the strings from each field, with jQuery("#id").value. I noticed that no matter what string i input into the fields I get the same "Success" alert for each field. When I printed the result of the jQuery().value method to the javascript console I always get "undefined", so I assume something with that is the problem.

As far as I can tell, the value method returns a scalajs.Dynamic, not a string. I am unsure, therefore, how to simply get the text from these text fields and am sure I'm missing something. Here is my code:

the index.html file: 

<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 =
    """/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|
  (\".+\"))@((\[[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: I am aware that there are some other errors in this code. I am mainly concerned with knowing how to get the string from the text input with Scala.js's JQuery api.

Upvotes: 0

Views: 1146

Answers (1)

Justin du Coeur
Justin du Coeur

Reputation: 2659

Ah, wait a second -- I see the likely issue. The identifiers in your jQuery calls are incorrect. You can't say jQuery("pass1"), it has to be jQuery("#pass1"), the same way you did for validationForm. The # tells jQuery to look for an ID named "pass1" -- as it is, I'm not sure what it's trying to look up, but it's probably returning an empty set of objects, so .value isn't producing anything.

This is one of the most common (and easy to make) mistakes in jQuery...

Upvotes: 1

Related Questions