Highlighted

Web Application - Web Form Validation in Campaign Classic

Avatar

Avatar

kartikeyavyas

Avatar

kartikeyavyas

kartikeyavyas

08-01-2019

Hi,

I have a Web form build with Adobe Campaign Web Application.

Page: Web Form (having 3 fields: customer_id, dob, email)
Page1: Where the customer will enter the password.
Page2: Personalized home page.

1663309_pastedImage_0.png

Page Activity has a web form having fields which are mandatory. (Fields must be filled/random value will work also).

1663455_pastedImage_7.png

As soon as I make the fields mandatory (check mandatory box to "Yes"). It throws the following error:

1663454_pastedImage_6.png

And if I check the mandatory box to "No". And the fields are empty, it's been redirected to the next page (i.e. Page1 activity).

I have used the following JS to make sure the fields shouldn't be empty.

1663461_pastedImage_9.png

The above js is working fine on html page.

Anyone knows how to solve the same.

Replies

Highlighted

Avatar

Avatar

wodnicki

MVP

Avatar

wodnicki

MVP

wodnicki
MVP

10-01-2019

Hi,

Looks like the schema's missing there. Is there anything set in Properties > Document type?

Could you paste the source code for the input fields?

Thanks,

-Jon

Highlighted

Avatar

Avatar

kartikeyavyas

Avatar

kartikeyavyas

kartikeyavyas

13-01-2019

Hi Jon,

Here's the source code.

<!DOCTYPE html>

<html>

<head>

<meta charset="ISO-8859-1">

<style>

body {

    font-family: Arial, Helvetica, sans-serif;}

* {

    box-sizing: border-box;}

/* Add padding to containers */

.container {

    padding: 16px;

    background-color: white;}

footer{

background-color: black;

color: white;

height:100px;

padding: 5px;

text-align: center;}

/* Full-width input fields */

input[type=text], input[type=password] {

    width: 100%;

    padding: 15px;

    margin: 5px 0 22px 0;

    display: inline-block;

    border: none;

    background: #f1f1f1;}

input[type=text]:focus, input[type=password]:focus {

    background-color: #ddd;

    outline: none;}

/* Overwrite default styles of hr */

hr {

    border: 1px solid #f1f1f1;

    margin-bottom: 25px;}

/* Set a style for the submit button */

.registerbtn {

    background-color: #4CAF50;

    color: white;

    padding: 16px 20px;

    margin: 8px 0;

    border: none;

    cursor: pointer;

    width: 100%;

    opacity: 0.9;}

.registerbtn:hover {

    opacity: 1;}

/* Add a blue text color to links */

a {

    color: dodgerblue;}

/* Set a grey background color and center the text of the "sign in" section */

.signin {

    background-color: #f1f1f1;

    text-align: center;}

#otpDiv{

display:none}

</style>

<script>

  function showverifyotp() {

    document.getElementById("otpDiv").style.display = "block";

      }

</script>

<script>

var storage_local;

  function otpValidate() {

  var CustomerId = document.getElementById("CustomerId").value;

  var DOB  = document.getElementById("DOB").value;

  var Email= document.getElementById("Email").value;

  if (CustomerId == "") {

  alert("Enter Customer ID");

  // CustomerId.focus();

  return false; }

    else {

    if (DOB == "") {

    alert("Enter DOB");

    // DOB.focus();

    return false; }

      else {

      if (Email== "") {

      alert("Enter the Email");

      //email.focus();

      return false; }

      }

    }

}

</script>

</head>

<body style="" class="">

<form>

<div class="container">

<h1>WEB - API</h1>

<p>Please fill in this form to get OTP.</p>

<hr />

<b>CustomerID</b> <input id="CustomerId" required="" type="text" placeholder="CustomerId" data-nl-label="Customer Id" data-nl-xpath="@customerId" data-nl-bindto="xpath" />

<b>Date Of Birth</b> <input id="DOB" required="" type="date" placeholder="DOB" data-nl-label="Date of birth" data-nl-xpath="@birthDate" data-nl-bindto="xpath" />

<b>Email</b> <input id="Email" required="" type="string" placeholder="Email" data-nl-label="email" data-nl-xpath="@email" data-nl-bindto="xpath" /><hr />

<button id="input154744421481711" onclick="otpValidate()" data-nl-bindto="action" data-nl-transition="next" data-nl-action="next">Submit</button></div>

</form>

</body>

</html>

Thanks,

Kartikeya

Highlighted

Avatar

Avatar

wodnicki

MVP

Avatar

wodnicki

MVP

wodnicki
MVP

13-01-2019

Thanks, is there anything set in Properties > Document type?

Highlighted

Avatar

Avatar

kartikeyavyas

Avatar

kartikeyavyas

kartikeyavyas

13-01-2019

No. There is nothing in Properties > document.

Highlighted

Avatar

Avatar

wodnicki

MVP

Avatar

wodnicki

MVP

wodnicki
MVP

14-01-2019

Set it to nms:recipient.

Highlighted

Avatar

Avatar

kartikeyavyas

Avatar

kartikeyavyas

kartikeyavyas

14-01-2019

Thanks. It is now working.

I have another query.

I want to pass one of the attributes, let's say CustomerId = 111. The form should redirect to next page, if CustomerId entered is equal to "111". And if not It should throw "Invalid CustomerId" error.

I'm using the below code.

if (CustomerId == "" || CustomerId!= 111) {

  alert("Enter Valid Customer ID");

  // CustomerId.focus();

  return false; } 

When I'm passing the empty values, it is working fine.

And If I enter any other value (be it "100" or "101"), it is accepting those values as well and redirecting to other page.

Any idea how to solve this issue.

Regards,

Kartikeya Vyas

Highlighted

Avatar

Avatar

wodnicki

MVP

Avatar

wodnicki

MVP

wodnicki
MVP

14-01-2019

Hi,

You have to call preventDefault() on the event. You should also be capturing form submit in addition to the button click (Campaign needs both events captured independently). The page uses jquery so it's simpler- I wrote this in the comment box here, so untested but should be close to what you want:

<script>

function otpValidate (e) {

  if ($('#CustomerId').value !== '111') {

    e.preventDefault();

    return false;

  }

}

$('form').submit(otpValidate);

$('button').click(otpValidate);

</script>

Thanks,

-Jon

Highlighted

Avatar

Avatar

kartikeyavyas

Avatar

kartikeyavyas

kartikeyavyas

15-01-2019

Hi,

I've an update on my query. Instead of customer Id the attribute that needs to be passed is password.

I'm passing hardcoded value (OTP = '111').

<script>

function verifyOTP(e) {

        if ($('#OTP').value != '12345' ) {

            e.preventDefault();

      return false;

      }

    }

$('form').submit(verifyOTP); 

$('button').click(verifyOTP); 

  </script>

It is showing the following error.

1668677_pastedImage_1.png

Any suggestion on what I'm doing wrong here.

Thanks,

Kartikeya

Highlighted

Avatar

Avatar

wodnicki

MVP

Avatar

wodnicki

MVP

wodnicki
MVP

15-01-2019

I double-checked and webapps do use jQuery, which sends the event in its calls, cf: https://api.jquery.com/submit/

You could maybe try wrapping the script with jQuery(document).ready(function($) { script goes here })