Web Application - Web Form Validation in Campaign Classic | Community
Skip to main content
kartikeyavyas
kartikeyavyas
Level 2
January 9, 2019

Web Application - Web Form Validation in Campaign Classic

  • January 9, 2019
  • 2 replies
  • 10634 views

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.

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

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

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.

The above js is working fine on html page.

Anyone knows how to solve the same.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    2 replies

    Jonathon_wodnicki
    Community Advisor
    Jonathon_wodnickiCommunity Advisor
    Community Advisor
    January 10, 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

      kartikeyavyas
      kartikeyavyasAuthor
      Level 2
      January 14, 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

      Jonathon_wodnicki
      Community Advisor
      Jonathon_wodnickiCommunity Advisor
      Community Advisor
      January 14, 2019

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

        kartikeyavyas
        kartikeyavyasAuthor
        Level 2
        January 29, 2019

        Amit_Kumar​
        Could you please share your thoughts ?

        Terms & ConditionsAccessibility statement

        Loading footer...