When using vue.js, I am able to successfully copy data by clicking on a text box, but unfortunately

I am facing an issue where the copied value from one text box to another is not passing validation upon clicking a checkbox. I need help resolving this issue, and I also have another concern about validating specific text boxes for numbers using regex within the same format as my current validation process. For example, in the pincode validation, I want users to only use numbers, with the first number not being 0. How can I achieve this?

I am utilizing the tab form of vue-wizard. Here is an image showing the error: https://i.stack.imgur.com/JZGrI.png

<tab-content title="OFFICE ADDRESS" icon="ti-settings" :before-change="validateSecondStep">

    <el-form :inline="true" :model="formInline2" class="demo-form-inline" :rules="rules2" ref="ruleForm2">

    <el-form-item label="Business Address : " prop=""></el-form-item>
    <br>

    <el-form-item label="Address 1" prop="addr1">
          <el-input id="addr1" maxlength="35" v-model="formInline2.addr1" placeholder="Address 1"></el-input>
        </el-form-item>

        <el-form-item label="Address 2" prop="addr2">
          <el-input id="addr2" maxlength="35" v-model="formInline2.addr2" placeholder="Address 2"></el-input>
        </el-form-item>
        <br>

        <el-form-item label="City/Town/Village" prop="ctv">
          <el-input id="ctv" v-model="formInline2.ctv" placeholder="City/Town/Village"></el-input>
        </el-form-item>


        <el-form-item label="Landmark" prop="lmark">
          <el-input id="lmark" maxlength="30" v-model="formInline2.lmark" placeholder="Landmark"></el-input>
        </el-form-item>


        <el-form-item label="Post Office" prop="poff">
          <el-input id="poff" maxlength="30" v-model="formInline2.poff" placeholder="Post Office"></el-input>
        </el-form-item>
        <br>

        <el-form-item label="Pincode" prop="pinc">
          <el-input id="pinc" maxlength="6" v-model="formInline2.pinc" placeholder="Pincode"></el-input>
        </el-form-item>
        <br>

        <el-form-item label="City" prop="city">
          <el-input id="city" maxlength="30" v-model="formInline2.city" placeholder="City"></el-input>
        </el-form-item>


        <el-form-item label="State" prop="state">
          <el-input id="state" maxlength="30" v-model="formInline2.state" placeholder="State"></el-input>
        </el-form-item>
        <br>


        <el-form-item label="Residence Address : " prop=""></el-form-item>
    <br>
    <el-form-item label="" prop="sameaddr"> 
    <el-checkbox-group v-model="formInline2.sameaddr">
      <el-checkbox label="click and populate if its same as business address" name="sameaddr" v-on:change="copyAddress(formInline2.sameaddr)"></el-checkbox>  
    </el-checkbox-group>
  </el-form-item>
  <br>
    <!-- <div v-if="formInline2.sameaddr == true"> -->

    <el-form-item label="Address 1" prop="raddr1">
          <el-input id="raddr1" maxlength="35" v-model="formInline2.raddr1" placeholder="Address 1"></el-input>
        </el-form-item>

        <el-form-item label="Address 2" prop="raddr2">
          <el-input id="raddr2" maxlength="35" v-model="formInline2.raddr2" placeholder="Address 2"></el-input>
        </el-form-item>
        <br>

        <el-form-item label="City/Town/Village" prop="rctv">
          <el-input id="rctv" v-model="formInline2.rctv" placeholder="City/Town/Village"></el-input>
        </el-form-item>


        <el-form-item label="Landmark" prop="rlmark">
          <el-input id="rlmark" maxlength="30" v-model="formInline2.rlmark" placeholder="Landmark"></el-input>
        </el-form-item>


        <el-form-item label="Post Office" prop="rpoff">
          <el-input id="rpoff" maxlength="30" v-model="formInline2.rpoff" placeholder="Post Office"></el-input>
        </el-form-item>
        <br>

        <el-form-item label="Pincode" prop="rpinc">
          <el-input id="rpinc" maxlength="6" v-model="formInline2.rpinc" placeholder="Pincode"></el-input>
        </el-form-item>
        <br>

        <el-form-item label="City" prop="rcity">
          <el-input id="rcity" maxlength="30" v-model="formInline2.rcity" placeholder="City"></el-input>
        </el-form-item>


        <el-form-item label="State" prop="rstate">
          <el-input id="rstate" maxlength="30" v-model="formInline2.rstate" placeholder="State"></el-input>
        </el-form-item>



    </el-form>


    </tab-content>

<script>
const app= new Vue({
   el: '#app',
     data() {
       return {
formInline2: {
         addr1:'',
         addr2:'',
         ctv:'',
         lmark:'',
         poff:'',
         pinc:'',
         city:'',
         state:'',
         sameaddr:false,
         raddr1:'',
         raddr2:'',
         rctv:'',
         rlmark:'',
         rpoff:'',
         rpinc:'',
         rcity:'',
         rstate:''
         },

         rules2: {
         // Validation rules here...
         },
}
 methods: {
         onComplete: function() {
           alert('Yay. Done!');
         },
         copyAddress: function(chk){
           // Copying address functionality here...
         },
</script>
phpvalidationvue.jselement

Answer №1

To ensure validation, it is crucial to execute the validate function on the el-form. For a comprehensive understanding of the validation techniques, please refer to:

In my sample implementation, I have eliminated the use of IDs and direct manipulation of the DOM. Copying can be efficiently handled within the data structures itself.

const app = new Vue({
  el: '#app',
  data () {
    return {
      formInline2: {
        addr1: '',
        sameaddr: false,
        raddr1: ''
      },

      rules2: {
        addr1: [{
          required: true,
          message: 'Please enter Address 1',
          trigger: 'blur'
        }, {
          max: 35,
          message: 'Length should not exceed 35 characters',
          trigger: 'blur'
        }],
        raddr1: [{
          required: true,
          message: 'Please enter Address 1',
          trigger: 'blur'
        }, {
          max: 35,
          message: 'Length should not exceed 35 characters',
          trigger: 'blur'
        }]
      }
    };
  },
  methods: {
    copyAddress (chk) {
      const form = this.formInline2;
      
      if (chk) {
        form.raddr1 = form.addr1;
      } else {
        form.raddr1 = '';
      }
      
      this.$refs.ruleForm2.validate()
    }
  }
});  
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d080108000803194018042d5f435c5d435c">[email protected]</a>/lib/theme-chalk/index.css">
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f292a3a1f6d7169716e6f">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1b121b131b100a530b173e4c504f4e504f">[email protected]</a>/lib/index.js"></script>
<div id="app">
  <el-form :inline="true" :model="formInline2" class="demo-form-inline" :rules="rules2" ref="ruleForm2">

    <el-form-item label="Business Address : " prop=""></el-form-item>
    <br>

    <el-form-item label="Address 1" prop="addr1">
      <el-input maxlength="35" v-model="formInline2.addr1" placeholder="Address 1"></el-input>
    </el-form-item>
    <br>


    <el-form-item label="Residence Address : " prop=""></el-form-item>
    <br>
    <el-form-item label="" prop="sameaddr">
      <el-checkbox-group v-model="formInline2.sameaddr">
        <el-checkbox label="Click to populate if same as business address" name="sameaddr" v-on:change="copyAddress(formInline2.sameaddr)"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <br>

    <el-form-item label="Address 1" prop="raddr1">
      <el-input maxlength="35" v-model="formInline2.raddr1" placeholder="Address 1"></el-input>
    </el-form-item>
  </el-form>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript and Ajax are functioning properly in Mozilla Firefox, however there seem to be some compatibility issues with Google Chrome

I have a form that serves the dual purpose of registration and login, and I am using JavaScript Ajax to submit it. While it works smoothly in Mozilla Firefox, it fails in Chrome and IE. The goal is to execute an AJAX and PHP script that checks the databa ...

javascriptphpajax

Having multiple HTML select elements and utilizing jQuery AJAX

I am looking to implement a dynamic multiple select using AJAX and jQuery. The first select (c1) is functioning correctly. When I click on it, it triggers the appearance of another select (c2). Similarly, clicking on the second select (c2) should lead to ...

phpjqueryajaxselect

Using v-model to dynamically update the router based on certain conditions

Check out this demo showcasing a navigation menu with nested items. Clicking "more" reveals the expanded list, which can be set to always open using v-model="item.model" with model = true. My goal is to have the submenu stay open only when the user is on ...

javascriptvue.jsvuetify.js

Adjusting the space between the fifth and sixth cell in PHP using FPDF

I'm having trouble generating this specific report." My goal is to achieve a layout similar to this sample: https://i.stack.imgur.com/ADc89.png However, the actual result I'm getting is more like this: https://i.stack.imgur.com/eSbER.png I n ...

phpfpdf

A setter that stands alone, waiting for its matching getter

Similar Question: What are practical applications of write-only properties? Having a getter without a setter is expected, creating a read-only property. Makes sense, no issue here. However, I'm faced with code that has setters but lacks getters, ...

phpooppropertiesgetter-setter

Execute an AJAX call in CodeIgniter using jQuery, and when the call is redirected, display the entire page within a

A peculiar issue arises with the form submission process. When the submit button is clicked, jQuery Ajax triggers a call to the controller for form validation. If the validation fails, the form is redrawn; if it passes, the page redirects to the home page ...

phpjqueryajaxcodeigniterhttp-redirect

The Wordpress plugin's Ajax function is giving back a response value of zero

I'm facing an issue where I am attempting to send AJAX data to my wordpress table, but the response I receive from my PHP script is always a 0. This problem arises specifically on the admin side of things. Can anyone provide assistance? Furthermore, ...

javascriptphpjqueryajaxwordpress

Using PHP to run a command line application that interacts with users through prompts

Currently, I am working on a PHP web application that needs to execute a command line application. For example, let's say we have the following command: foo -arg1 -arg2 -arg3 In certain scenarios, the command line application will require the user t ...

phpcommand-linelampwamp

Displaying Form Results on the Same Page in Drupal: A Step-by-Step Guide

Is there a way to display the results of a form submission on the same page as the form itself? Here is the relevant hook_menu code: $items['admin/content/ncbi_subsites/paths'] = array( 'title' => 'Paths', ...

phpformsdrupaldrupal-6drupal-fapi

Exploring the world of computed properties in Vue.js

Currently working on implementing a dynamic category feature in Vue.js My project involves four input fields: Team, Gender, Age, Grade I want the text on the screen to update every time one of these inputs changes, indicating the selected category. Init ...

vue.js

Accessing information from the database when logging in

I am currently working on a mobile application using Slim and Ajax. Within my database, there is a column that stores session codes for logins. After a user logs in, I need to compare the entered username with the database and retrieve the sessionCode asso ...

phpjqueryajaxslim

Create new versions of webpages by utilizing Htaccess

I am using htaccess and have configured the following rules: RewriteEngine On RewriteCond %{HTTPS} !=on RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L] My goal is to implement clean URLs for my pages. For example, I want: /terms.php to be rewritten ...

phpapache.htaccessmod-rewrite

Update the div element without needing to reload the entire page

Is there a way to reload a div tag without refreshing the entire page? I understand this question has been asked before, but I want to make sure I have a clear understanding. <p>click HERE</p> <div class="sample"> <?php functi ...

javascriptphpjquerycss

Encountering a Troubleshooting Issue with ArcGIS JS API 4.7 and N

Recently, I have been attempting to set up ArcGIS JS API 4.7 using npm for a Vue.JS project. However, when I execute the command npm install arcgis-js-api I encounter an error with NPM: npm ERR! code E404 npm ERR! 404 Not Found: @dojo/i18n@~0.6.0 Althou ...

node.jsnpmvue.jsdojoarcgis-js-api

The integration between curl_exec and Mailchimp fails to function properly when implemented with AJAX

I have successfully set up a form within my Wordpress site to send data to Mailchimp using their API. When I use a standard form that redirects to a designated page, everything works smoothly and all the data gets imported as expected. However, I am now t ...

phpjqueryajaxcurlmailchimp

Vue 2 enhanced with vue-cli, vue-property-decorator, and vue-class-component, featuring the elegant Vuetify design system, undergoing a seamless migration to the latest

I have undertaken a project to upgrade from Vue 2 to Vue 3. Following the Vue migration documents, the codebase has been updated: . There seems to be a mismatch with the libraries mentioned above. Is there anyone with a running project who would be willing ...

vue.jsvuetify.jsvue-clivue-class-componentsvue-property-decorator

Wordpress articles refuse to appear side by side

I've been at it for hours now, trying to solve this issue with no luck. I have a Wordpress loop on my homepage that displays post thumbnails vertically, but I want them to appear in sets of three images before starting a new line. Here's the cod ...

phpcsswordpress

JSONP - Remote Server Denied Access with Error 403

I've encountered an issue that has been puzzling me for the past two days without any success: The Issue : My RSS Parser works perfectly fine on my Localhost, but when I try to run it on my Hostgator domain, it refuses to make requests. Is there any ...

phprssjsonp

Difficulty encountered in constructing a menu through the process of iteration

As a newcomer to Vue and Vuetify, I am trying to create a submenu using v-menu. The construction involves iteration, where each sub menu needs to be assigned a method. However, my current approach is resulting in an error message: [Vue warn]: Error in v ...

vue.jsvuetify.js

Using PHP to Compare Two Array Values

I'm looking for help with comparing two arrays. I've searched this forum but haven't found exactly what I need. $stock = array("7", "5", "3"); $request = array("3", "6", "3"); What I want to do is check if every value in $stock is higher t ...

phparrays