Play Framework Manual Filling of Certain Fields

Play Framework
1

I am using this to learn play-framework with slick.
I have this url form in my controller

    val urlForm = Form(
          mapping(
            "id" -> ignored(Some(0): Option[Long]),
            "link" -> nonEmptyText,
            "shortLink" -> nonEmptyText)(Url.apply)(Url.unapply))

On the view side, it is rendered as

@form(routes.Application.save()) {	
					<fieldset>@formElements(urlForm)</fieldset>
				
					<div class="actions">
						<input type="submit" value="Create this url" class="btn btn-primary"> or
						<a href="@routes.Application.list()" class="btn btn-default">Cancel</a>
					</div>			
				}

I have two questions:

1- How can I fill shortLink from data filled in link field and make it hidden for user.

2- How can I validate if data filled in link field is a valid URL

Things I have tried:

1- Reading this and trying to use it in my project, but couldn’t apply it.

2- Seeing answers on how to make fields hidden, but didn’t work on this project because the view is just creating all the fields from formElements(urlForm) making me unable to set them hidden manually.

2

How can I fill shortLink from data filled in link field and make it hidden for user.

There are multiple ways of doing this:

  1. Since shortLink is always equal to link anyway, we might as well eliminate shortLink.
  2. You can do some javascript magic in your HTML to sync the values between link and shortLink. So, when the form is submitted, both values are equal and sent to the backend.

How can I validate if data filled in link field is a valid URL

You can write your own validation logic that uses regex. Something like nonEmptyText.verifying("error.invalid", _.matches(URL_REGEX))

I’ve recently written a tutorial on how to do form submission/validation with Playframework + Javascript framework. So, it might only partially apply to you: https://give.engineering/2018/09/15/form-submission-and-validation-in-playframework.html

3

Thanks for replying.
Actually shortLink and link are not the same thing. I want to perform some operations on link and then put that value in shotLink. shortLink is a disabled field for user. So what I was asking was, how can I fill shortLink field based off the value on link field. All fields have to be filled before submission of the form right? Also, all my fields are rendered through this one line <fieldset>@formElements(urlForm)</fieldset>, how can I access individual fields? Like what can I do to disable shortLink field?

4

I want to perform some operations on link and then put that value in shotLink. shortLink is a disabled field for user.

I see what you mean now. This seems more like a Javascript question. If you use plain Javascript (without any framework), on a high level, you have to:

  1. Listen to the keyup event on <input id="link">
  2. When the keyup event is fired, modify <input id="shortLink" disabled> accordingly.

Here’s a working example: Edit fiddle - JSFiddle - Code Playground

Also, all my fields are rendered through this one line @formElements(urlForm), how can I access individual fields?

For this, I have no idea.